Migration of Webpack4

Reference to HTTPS://WWW.JIANSHU.COM/P/7AE252F27F09

Feeling is suddenly, Webpack4 news on the fly, I heard that packaging speed increased a lot, there is the biggest gimmick is to achieve the 0 configuration, leader one day told me that there is time to our project also raise a level Bai. All right.

1.x to 2.x

The upgrade span is relatively large, we are upgrading from webpack1.x to 4.x, because 1.x and 2.x is quite large, so the first thing is to first up to 2.x, larger than the change is loader the configuration method

__ Orange Sheng Huainan
Links: https://www.jianshu.com/p/7ae252f27f09
Source: Pinterest
The copyright of the book is owned by the author, and any form of reprint should be contacted by the author for authorization and attribution.

and loader must write complete, vue-loader if only write vue will error. loaderYou can also options configure it by doing so.

Legacy chained calls are also replaced with arrays.

webpack2.xThe ES6 module is supported by default, so it is not necessary to convert the modules before they are compiled, it is CommonJS babel-preset-es2015-webpack supported not to convert the modules import and export only need to set.babelrc

In addition is the plug-in upgrade, run when which plug-in error upgrade which plug-ins, tried.

2.x to 4.x first step: Version upgrade

• No longer supported node 4 , can be upgraded directly to the 8.x version
• webpackUpgrade

• Plug-in upgrade, the same, which error on which to upgrade, in addition html-webpack-plugin to the following method upgrade, because the author has not had time to upgrade

extract-text-webpack-pluginOnly the latest beta version is supported, sonpm install [email protected] --save-dev

The second step of running the command adds --mode developmentAnd --mode production

PS: Although said to webpack 4 be 0 configuration, the import default is src/index.js , export is dist/ , but because the project is multi-page, so this step is not omitted, according to the actual situation.

Third Step removal CommonsChunkPlugin

Because of multiple pages, it combineshtml-webpack-plugin

At first, it was because I had no replication default and no default:false , so the default configuration was to separate the public parts of all the modules into a file, but I HtmlWebpackPlugin didn't add them in chunks , so either overwrite the original default configuration or close the default configuration.

Fourth Step: Configure postcss autoprefixer

Fifth step: Do not need uglifyjsplugin plug-in

Just set optimization.minimize: true the line, and the production mode following will automaticallytrue

The above is only in the original project on the basis of the webpack 4 upgrade, there are some features are not used, so no mention, such as,, and sideEffects javascript/auto javascript/esm javascript/dynamic webassembly/experimental so on, have the opportunity to explore.

Migration of Webpack4