Detailed explanation of the correct posture of Webpack packaging third-party libraries

Webpack is more wide, but there are many freshly known detail settings, and many people will think this is the WebPack’s bug. This time, let’s talk about WebPack.Optimize.commonschunkplugin.

This Plugin I believe that almost 90% uses this with WebPack, but I also believe that almost 90% of people who have used this Plugin are not properly used.


Entry: {index: ‘./app/main.jsx’, vendor: [‘React’, ‘React-Dom’, ‘React-Router ‘,’ classnames’]}, output: {path: path.resolve (__ dirname, ‘./dist’), filename: “[name] [chunkHash:. 8] .js”, publicPath: ”, chunkFilename: ” . [name] [chunkHash: 8] .js “,}, plugins: [new webpack.optimize.CommonsChunkPlugin ({names: [ ‘vendor’],}),]
   What should I don't have a stranger? Package third party vendor. 
In fact, it is problematic. What is the problem? We will operate according to this configuration.

First, run it, we will get the output of Vendor.js to add Hash values;

then modify the Index entranceArbitrary files, compile it again, get the output of Vendor.js to add Hash values;


Finally, more Vendor.js compiled two compiled HASH values, you will be surprised, why Hash value changed? I didn’t modify vendor.

The HASH value changed, then we have no meaning to pack this vendor.


Placing why this problem is caused, I don’t go to the door, I want to know people go to study the bottom of Webpack.


Here, I just throw a solution:


Entry: {index: ‘./app/main. JSX ‘, Vendor: [‘ React ‘,’ React-Dom ‘,’ React-router ‘,’ ClassNames’]}, Output: {Path: path.resolve (__ DIRNAME, ‘./dist’), FileName: “[ Name]. [chunkhash: 8] .js “, publicPath: ‘, chunkfilename:” [name]. [chunkhash: 8] .js “,}, plugins: [new webpack.optimize.commonschunkplugin ({Names: [‘ Vendor ‘,’ Manifest ‘],},]

Yes, that is, the above configuration, just simply adds’ manifest’.

Be the test again, you will find more manifest.js, but VendoThe HASH value of R is no longer changing.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment