Webpack packaging and separating third-party libraries and business code

With Webpack packaging engineering, it is often necessary to separate the code of the third-party class library and the application itself, because third-party class libraries are not updated so frequently that the browser can read directly from the cache, without requiring the item to be fetched once every time.

In the case of react, this is normally the case initially:

1 module.exports ={2Entry: {3 app: "./src/app.js",4 Vendor: ["React", "react-dom"]5},6Output: {7 path: __dirname + "/dist", 8 filename: "[name].[ Chunkhash:8].js ", 9 Publicpath:"/dist/"10 },11  ... 12  plugins: [13  ... 14 new Webpack.optimize.CommonsChunkPlugin ({15 names: ["Vendor" ]16 }) 17 ]18};       

And then we'll find that once the app code changes, After repackaging the hash value of app.js and Vendor.js will change, the specific reason is basically because App.js changed, Webpack will generate a runtime injection vendor.js, resulting in vendor.js also changed (because the two related).

Solution at present I know two kinds of better.

The first is the use of webpack. Dllplugin, the specific use of a lot of online, configuration is a bit more complex, not listed here.

The second method is to use Commonschunkplugin to generate a special tracking vendor.js changes in the JS file, can generally be named Manifest.js, the specific configuration is as follows:

1 module.exports ={2Entry: {3 app: "./src/app.js",4 Vendor: ["React", "react-dom"]5},6Output: {7 path: __dirname + "/dist", 8 filename: "[name].[ Chunkhash:8].js ", 9 Publicpath:"/dist/"10 },11  ... 12  plugins: [13  ... 14 new Webpack.optimize.CommonsChunkPlugin ({15 names: ["Vendor", "Manifest" ]16 }) 17 Span style= "COLOR: #000000" >]18};         

The configuration of Commonschunkplugin can also be fitted as follows:

1 module.exports ={2...3 plugins: [ 4  ...  5 new Webpack.optimize.CommonsChunkPlugin ({ 6 names: ["Vendor" ] 7  8 new Webpack.optimize.CommonsChunkPlugin ({ Span style= "COLOR: #008080" > 9 names: ["Manifest" ],10 Chunks: ["Vendor" ]11 }) Span style= "COLOR: #008080" >12 ]13};     

After we have finished modifying the application code and repackaging it, the result is that the hash value of the vendor.js is no longer changed.

I have seen the online tutorials, basically all here to the end. However, when I run the code and want to see the effect, the result is a blank page with an error in Chrome:

？？？

It was a real moment. Google, StackOverflow search for a long time have not found a satisfactory answer (may be the search is relatively low).

Later I did not intend to see the generated index.html, found inside the JS sequence inserted is this:

Then open the first line in Chrome with an error:

The error was found to have started from app.js. Under normal circumstances should be app.js reference Vendor.js in the method, that is, app.js loading order should be after the vendor.js, but now the order is reversed, could it be caused by this reason?

So we manually modified the index.html, exchanging the loading order of app.js and Vendor.js. Re-run the code and the results are displayed correctly.

It seems that the chunks injection sequence is causing confusion, and is there any way to inject it in the correct order of reference? This depends on the Html-webpack-plugin plugin.

Originally about Html-webpack-plugin plugin We are so worthy of:

1 module.exports = {    ... plugins: [ ... New Htmlplugin ({ 6 filename: "). /index.html ", 7 Template: __dirname +"/src/templates/index.html " }) ]ten};   

In Html-webpack-plugin, there is a configuration item called Chunkssortmode, which can specify the order of chunks injections, which can be configured as: "None" | "Auto" | "Dependency" | {function}. The default configuration is "Auto".

Now we add this configuration item and configure it as "dependency":

  1 module.exports = { 2  ...  3  plugins: [ 4  ...  5 new Htmlplugin ({ 6 filename: ". /index.html ", 7 Template: __dirname +"/src/templates/ Index.html ", 8 Chunkssortmode:" Dependency " 9 }) 10 ]< Span style= "COLOR: #008080" >11};             

And then RePack, and then look at index.html, found that the next app.js in the vendor.js behind, and finally run the program can also be displayed normally.

Webpack packaging and separating third-party libraries and business code