Shulou(Shulou.com)06/03 Report--

This article mainly introduces the webpack3 upgrade to webpack4 example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

1 webpack upgrade to version 4.0 and install webpack-cli

Yarn add webpack-cli global

Yarn add webpack-cli-D

If you do not install webpack-cli, the error will be as follows:

The CLI moved into a separate package:webpack-cli.

Please install 'webpack-cli' in addition to webpack itself to use the CLI.

-> when using npm: npm install webpack-cli-D

-> when using yarn: yarn add webpack-cli-D

2 dependency on some packages

Go on, yarn run dev Yahweiler! Wrong report

Error: Cannot find module 'webpack/bin/config-yargs'

At Function.Module._resolveFilename (module.js:538:15)

At Function.Module._load (module.js:468:25)

At Module.require (module.js:587:17)

At require (internal/module.js:11:18)

At Object. (C:\ Users\ hboxs022\ Desktop\ webpack-demo\ webpack-demo\ node_modules\ webpack-dev-server\ bin\ webpack-dev-server.js:54:1)

At Module._compile (module.js:643:30)

At Object.Module._extensions..js (module.js:654:10)

At Module.load (module.js:556:32)

At tryModuleLoad (module.js:499:12)

At Function.Module._load (module.js:491:3)

Error Command failed with exit code 1.

Solution: this is the current version of webpack-dev-server does not support a wave of webpack4 upgrades

Yarn add webpack-dev-server@3.1.1-D / / I packed a 3.1.1 bag

But after reading a lot of information, as long as webpack-dev-server is version 3.0 or above, it seems to be compatible with fog. Anyway, I passed 3.0.0-alpha6.

3 remove commonchunk plugin and use webpack.optimize.SplitChunksPlugin instead

Execute yarn run dev again and then make a mistake. There are ten thousand galloping Mustangs in my heart. I can't help it. I can't help it.

Cause of error

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead

Webpack4 abolished a lot of api before configuring to split public code and packaging third-party library thieves, and then the authorities simply abolished the previous webpack.optimize.SplitChunksPlugin.

Then, with regard to the use of this plug-in, I also worked for a long time and then went to the official example to take a look at it before I had a clue. If you had a general understanding of the original commonchunk plugin and went directly to see the official example, you would understand that the official example link was posted here, the most important of which is the common-chunk-add-vendor-chunk example of how to package multiple file entries. Not to mention putting links directly and clearly tells you how to split common code and third-party libraries.

As for packaging the runtime code, webpack4 calls the new method ok directly.

New webpack.optimize.RuntimeChunkPlugin ({name: "manifest"})

I also posted about the detailed usage of webpack.optimize.SplitChunksPlugin. Interested students can figure it out for themselves.

New webpack.optimize.SplitChunksPlugin ({chunks: "initial", / / must choose one of three: "initial" | "all" (default is all) | "async" minSize: 0, / / minimum size, default 0 minChunks: 1, / / minimum chunk, default 1 maxAsyncRequests: 1, / / maximum number of asynchronous requests Default 1 maxInitialRequests: 1, / / maximum initialization request, default 1 name: function () {}, / / name This option can receive function cacheGroups: {/ / cached chunks priority: 0, / / cache group priority vendor: {/ / key is the entry name defined in entry chunks: "initial", / / must be one of three: "initial" | "all" | "async" (asynchronous by default) name: "vendor" / / separated chunk names to be cached: minSize: 0, minChunks: 1, enforce: true, maxAsyncRequests: 1, / / maximum number of asynchronous requests Default 1 maxInitialRequests: 1, / / maximum initialization request, default 1 reuseExistingChunk: true / / you can set whether to reuse the chunk (check the source code does not find the default)})

Finally, paste the modified webpack.optimize.SplitChunksPlugin code.

New webpack.optimize.SplitChunksPlugin ({cacheGroups: {default: {minChunks: 2, priority:-20, reuseExistingChunk: true,}, / / package the recurring code vendor: {chunks: 'initial', minChunks: 2, maxInitialRequests: 5, / / The default limit is too small to showcase the effect minSize: 0 / / This is example is too small to create commons chunks name: 'vendor'}, / / package third-party library commons: {name: "commons", chunks: "initial", minChunks: Infinity}), new webpack.optimize.RuntimeChunkPlugin ({name: "manifest"})

4 upgrade happypack plug-in!

As for why you use the scarlet letter if you use happypack for multithreaded accelerated packaging, you should remember to upgrade happypack because I have been stuck here for a long time and then read other people's configuration to know that happypack is not compatible and needs to be upgraded. Post the error prompt at that time.

TypeError: Cannot read property 'length' of undefined

At resolveLoader (C:\ Users\ hboxs022\ Desktop\ webpack-demo\ webpack-demo\ node_modules\ happypack\ lib\ WebpackUtils.js:138:17)

At C:\ Users\ hboxs022\ Desktop\ webpack-demo\ webpack-demo\ node_modules\ happypack\ lib\ WebpackUtils.js:126:7

At C:\ Users\ hboxs022\ Desktop\ webpack-demo\ webpack-demo\ node_modules\ happypack\ node_modules\ async\ lib\ async.js:713:13

Solution: upgrade

5 most of the remaining problems are posted here because the current package is not compatible with webpack4

Var outputName = compilation.mainTemplate.applyPluginsWaterfall ('asset-path', outputOptions.filename, {

^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

At C:\ Users\ hboxs022\ Desktop\ webpack-demo\ webpack-demo\ node_modules\ html-webpack-plugin\ lib\ compiler.js:81:51

At compile (C:\ Users\ hboxs022\ Desktop\ webpack-demo\ webpack-demo\ node_modules\ webpack\ lib\ Compiler.js:240:11)

At hooks.afterCompile.callAsync.err (C:\ Users\ hboxs022\ Desktop\ webpack-demo\ webpack-demo\ node_modules\ webpack\ lib\ Compiler.js:488:14) solution: upgrade html-webpack-plugin

Yarn add webpack-contrib/html-webpack-plugin-D

Finally, extract-text-webpack-plugin and sass-loader also need to be upgraded. I will post my webpack4 demo at the end. Watch the installation, ha.

6 the final configuration completes the test.

Under the development environment

The yarn run start ok effect is fine. Take a look at the webpack3 17161ms in the 9891ms comparison diagram of the build time.

:\ Users\ hboxs022\ Desktop\ webpack4 > yarn run devyarn run v1.3.2$ set NODE_ENV=dev & & webpack-dev-serverHappy [js]: Version: 5.0.0-beta.3. Threads: 6 (shared pool) (node:2060) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` insteadi "wds": Project is running at http://localhost:8072/i "wds": webpack output is served from / I "wds": Content not from webpack is served from C:\ Users\ hboxs022\ Desktop\ webpack4\ srcHappy [j]: All set; signaling webpack to proceed.Happy [css]: Version: 5.0.0-beta.3. Threads: 6 (shared pool) Happy [css]: All set; signaling webpack to proceed. (node:2060) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly insteadi "wdm": wait until bundle finished: / page/index.htmli "wdm": Hash: 1911cfc871cd5dc27acaVersion: webpack 4.1.1Time: 9891msBuilt at: 2018-3-28 18:49:25

In the production environment

Yarn run build

Ok third-party library jquery is packaged into common, the common js code is packaged into vendor common style, and it is also packaged into ventor and then separated into vendor.css.

The directory structure is no problem, and the module id is also fixed.

Let's take a look at the speed comparison.

Webpack3

Is webpack4 my delusion?

Thank you for reading this article carefully. I hope the article "sample Analysis of upgrading from webpack3 to webpack4" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.