webpack-bundle icon indicating copy to clipboard operation
webpack-bundle copied to clipboard

Request option to not add random identifier in compiled file name

Open PierreNansot opened this issue 7 years ago • 5 comments

Hey,
I recently tried Symfony Encore bundle. It was nothing compare to yours in term of usability but there is at least something they do right.
It's keeping prod's compiled files name consistent.

In my case, i deploy my project on a PaaS service with a simple git push. To ease my deploy, i compile on my computer my front-end which is recommended by Symfony and my hoster.
Everytime i have to deploy, i compile with the command line, remove previous files, add to git new files and then commit before pushing.
I could substract 2 actions if the name of the compiled files were the same.

If it's not a burden on you, i'd appreciate.
Thanks

PierreNansot avatar Sep 26 '17 06:09 PierreNansot

AFAIk, everything you need to do is change the chunk name inside webpack.config.js

mvrhov avatar Sep 26 '17 06:09 mvrhov

If the names are the same, you loose cache busting - you either cannot cache your assets or your users can see old files instead of newly compiled ones. Filenames include hashes, so they only change when their content changes.

If you really appreciate your dev-flow more than performance for your users, you can configure chunkname in config.js, as @mvrhov has mentioned.

Otherwise the bundle could cleanup the output directory before compiling automatically, if configured. Would such a feature be convenient for you? I imagine special command line option could be used for that. Just to mention, this would require that output directory would contain webpack generated files only.

mariusbalcytis avatar Sep 26 '17 15:09 mariusbalcytis

Thanks for the feedback.
Indeed, i forgot about cache busting. Does it seem possible to include the hash in the

To be less stupid, (still learning my way around webpack)
I removed the [hash] in my webpack config there

publicPath: publicPath, filename: BUILD ? '[name].js' : '[name].bundle.js', chunkFilename: BUILD ? '[name].js' : '[name].bundle.js'

Still compile with hash...

PierreNansot avatar Sep 26 '17 18:09 PierreNansot

Hey @PierreNansot - I think I can explain why you're not seeing the behaviour you'd expect after removing the [hash].

Webpack works by transpiling/processing files getting them ready for the browsers. In order for it to do that it needs a list of files that it needs to process, these are called entries.

This bundle looks at all of your configured twig files searching for webpack_asset calls. It then takes the resource paths that you've requested.

For js/ts/coffee/etc resources it takes that list and generates the entries section for the webpack configuration, typically you name the entries so that when webpack produces the output you know what file to include in your HTML.

When the bundle generates these entries, it appends a SHA1 of the file path -- For instance if you have a single webpack_asset resource "src/js/myapp.js" You'll end up with an entry named 'myapp-9347608c1ee0a8687352467e2c6aab9259d12265.js' (Note that 9347608c1ee0a8687352467e2c6aab9259d12265 is the SHA1 of "src/js/myapp.js"). I believe this hash is intended to prevent any entry collisions where you have several entry points with the same filename (consider "src/js/widget1/widget.js", "src/js/widget2/widget.js".)

From what I can tell, this behaviour is not configurable and will require you to do some work to extend the \Maba\Bundle\WebpackBundle\Service\AssetNameGenerator::generateName function and update the DI in Symfony....

Now as for the filename property that you modified in the webpack configuration above, this tells webpack what to call the entry file once it's been generated.

Let me break down the original property:

{
  filename: BUILD ? '[name].[chunkhash].js' : '[name].bundle.js',
}

This says that if the environment is prod (BUILD is set close to the top of the config file) then add the hash into the file - I think the hash is determined by the content of the file which helps when you need to cache bust. So for our "src/js/myapp.js" example you'll end up with:

  • "myapp-9347608c1ee0a8687352467e2c6aab9259d12265.bundle.js" in development
  • "myapp-9347608c1ee0a8687352467e2c6aab9259d12265.4129cb2c56de7fb2bb42e0062eee150b.js" in production.

I know this doesn't really help with changing it to a ?v=3 strategy but I hope that at least it'll enable you to understand why you still have hashes appearing on your assets 😬

@mariusbalcytis If I've missed something, or made a mistake please correct me. I've learnt a lot about this bundle over the last few days and writing this out has helped me solidify some of my understanding!

antonyoneill avatar Oct 15 '17 16:10 antonyoneill

@antonyoneill you're right - hashes are still there as entry points are generated with this hash, as you've explained. On another hand, those hashes do not change when file itself changes. So, as there are still hashes, filenames are consistent.

Changing generation strategy can be not so straightforward, as you can provide any webpack filter there (like imports-loader?$=jquery!@myAlias/someDirectory/asset.js).

For using query string instead of different filename, just try putting chunkhash in query string like this:

{
  filename: BUILD ? '[name].js?v=[chunkhash]' : '[name].bundle.js',
}

I haven't tested this yet, but I've found that this should be possible.

mariusbalcytis avatar Oct 18 '17 04:10 mariusbalcytis