[Enhancement] Switch WebpackManifestPlugin for remote package and apply remove hash hack for CopyWebpackPlugin files

[shadowc]

closes #1089

• Removed fork of WebpackManifestPlugin in favor for the maintained remote repo.
• Applied a global fix for files coming from CopyWebpackPlugin where hashes would get copied to the manifest "key".

Missing:

• Add a few tests

[Lyrkan]

Hi @shadowc,

I'm not sure it would always work... IIRC the hard thing to handle here is that the user has control on the naming, so you can't really assume that:

• hashes will be 8 characters long (users could chose a different length)
• hashes will only be composed of hexadecimal characters (hash function can be changed as well)
• hashes will be at that exact position (eg. [contenthash].[name].js)
• original filenames won't contain something that looks like a hash (eg. foo.aaaaaaaa.d1fc2a.txt would become foo.d1fc2a.txt)

[shadowc]

Thanks for the heads up! We do have the info at that point of what format the user choose for the to file name, do we? Also, there is a default format [name].[contenthash].[ext] that encore uses?

I'll investigate this further and put against several scenarios to double check!

[shadowc]

To answer my own question, I believe we don't have all this information.

I will think of ways to cache regexp patterns for each CopyWebpackPlugin entry together with the position of the hash, then use this to remove such hash from the entry in this function. I believe this could work.

[shadowc]

On the other hand, what I need to cache is the name of the original entry file (not the to field) and just retrieve that somehow.

[shadowc]

Here's a simplified version of how this should work:

static_file_mapping = {};
config = {
  plugins: [
    new CopyPlugin([{
            from: {
                glob: 'static/**/*.@(png|svg|jpg|gif|ico)',
                dot: false,
                noext: false,
            },
            to: '[contenthash].[ext]',
            // flatten: true
            transformPath(targetPath, absosutePath) {
                relative_path = path.relative(
                    path.resolve(root_dir),
                    absosutePath)
                static_file_mapping[relative_path] = targetPath;
                return targetPath;
            }
    }]),
    new ManifestPlugin({
      assets: static_file_mapping,
    })
  ]
}

[Lyrkan]

If that helps here is the PR in which I initially tried to implement copyFiles() using the WebpackManifestPlugin: #221

As you will be able to read in the comments I couldn't make it work at that time because the CopyWebpackPlugin didn't expose original filenames. It looks like some work as been done since then: webpack-contrib/copy-webpack-plugin#309 (comment)

Not sure if that can be used without modifying the WebpackManifestPlugin internals though.

[shadowc]

Thank you! I'll look into this and come up with a better solution!

[shadowc]

After a lot of poking around and investigating, I'm putting this PR on hold for a while.

Using CopyWebpackPlugin (which I thought it's what was being used in encore) is probably advised instead of FileLoader but out of the scope of this PR.

Switching to WebpackManifestPlugin (instead of the forked version) is still a possibility, but since we have no hold on the before -> after process of filename transformation, we might need to do something special in FileLoader to generate regexps based on the user configuration, so we can create a map something like this:

const copyFilePathMap =  {
    'original/file/name.js': /^original/file/name.([ah09]{8}).js$/,
};

Where regexps are generated dynamically according to what the user provided in terms of file name format.

This doesn't seem simple at all since the user could strip the file extension, change its name completely, etc...

EDIT: We would then use this hashmap of regexps to check on the Manifest plugin map function, which of the files are being generated with hashes (where they should not be) and fall them back to their original names.

[weaverryan]

This looks like a dead end for now, but thanks for checking into it!