Remember once WEBPACK3 upgrade Webpack4 pit

Webpack4 version also out of a long time before a period of upgrade back for a variety of reasons stranded today there is a bite to upgrade a wave of yeah fortunately upgrade success

First, put a wave of the original WEBPACK3 github configuration

PS (I just a dish chicken = = Webpack configuration very spicy chicken) nonsense less

1 Webpack upgrade to version 4.0 and install WEBPACK-CLI

　　

Yarn Add WEBPACK-CLI Global
Yarn Add webpack-cli-d

If the WEBPACK-CLI is not installed, the error will be as follows:

The CLI moved into a separate package:webpack- on 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 dependent dependencies on some packages

Continue yarn Run Dev yeah!!! An error.

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.<anonymous> (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 withExit code 1.

Workaround: This is the current version of Webpack-dev-server does not support WEBPACK4 upgrade a wave

　　

I'm faking a 3.1.1 bag.

But read a lot of information as long as Webpack-dev-server is 3.0 version above seems to be compatible with fog anyway I was 3.0.0-alpha6 passed the

3 Remove commonchunk plugin switch to Webpack.optimize.SplitChunksPlugin

Perform yarn run dev again and then make a mistake. 10,000 galloping wild horses there's no way.

Cause of error

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

WEBPACK4 has abolished many APIs before configuring split public code package third-party library thief Trouble then the official pound directly abolished the previous and the Webpack.optimize.SplitChunksPlugin

and then about the use of the plug-in I also took a long time to run to the official example inside to see a bit of the clue, if you have a general understanding of the original　　 Commonchunk Plugin go straight to the official example and you'll understand. The official example link is posted here, the most important of which is the common-chunk-add-vendor-chunk example of how to pack multiple file portals, not to mention the links It's straightforward to tell you how to split common code and third-party libraries.

As for the packaging runtime code WEBPACK4 directly call the new method OK, okay.

　　

        New Webpack.optimize.RuntimeChunkPlugin ({            "manifest"        }),

Detailed usage of Webpack.optimize.SplitChunksPlugin I also posted out interested students can self-pondering

                NewWebpack.optimize.SplitChunksPlugin ({chunks:"Initial",//three must be selected: "Initial" | "All" (default is All) | "Async"minsize:0,//minimum size, default 0Minchunks:1,//minimum chunk, default 1Maxasyncrequests:1,//Maximum number of asynchronous requests, default 1Maxinitialrequests:1,//maximum initialization request, default 1Namefunction () {                    }, //name, this option can receive the functionCachegroups: {//Here we start setting the cache chunkspriority:0,//Cache Group PriorityVendor: {//Key is the name of the entry defined in entryChunks: "Initial",//three must be selected: "Initial" | "All" | "Async" (default is Async)Name: "Vendor",//The delimited chunk name to cacheminsize:0, Minchunks:1, enforce:true, Maxasyncrequests:1,//Maximum number of asynchronous requests, default 1Maxinitialrequests:1,//maximum initialization request, default 1Reuseexistingchunk:true //you can set whether or not to reuse the chunk (see source no default value found)                        }                    }                }),

　　Finally, post the modified Webpack.optimize.SplitChunksPlugin code.

        NewWebpack.optimize.SplitChunksPlugin ({cachegroups: {default: {minchunks:2, Priority:-20, Reuseexistingchunk:true,                },                //Packaging Recurring CodeVendor: {chunks:' Initial ', Minchunks:2, Maxinitialrequests:5,//The default limit is too small to showcase the effectminsize:0,//This is example are too small to create commons chunksName: ' Vendor '                },                //Packaging a third-party class libraryCommons: {Name:"Commons", chunks:"Initial", Minchunks:infinity}} }),        NewWebpack.optimize.RuntimeChunkPlugin ({name:"Manifest"        }),

4 UPGRADE Happypack plugin!!!!!

　　As for why use the red Word if the happypack for multi-threaded accelerated packaging of small partners must remember to upgrade Happypack because I stuck here for a long time after looking at the configuration of others to know that Happypack is not compatible with the need to upgrade tears Ben .... Post the error message at the 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

Workaround: Upgrade the Chant

　　

Yarn add [email protected]-D

　5 The rest of the problem is mostly because the current package is incompatible with the WEBPACK4.

　　

  var outputname = Compilation.mainTemplate.applyPluginsWaterfall (' Asset-path ', Outputoptions.filename, {                                                  ^functionat    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)

Workaround: Upgrade Html-webpack-plugin

1 yarn Add webpack-contrib/html-webpack-plugin-d

Finally, Extract-text-webpack-plugin and Sass-loader also need to be upgraded specifically I'll post my Webpack4 demo at the end and everyone look at the installation ha

6 Final configuration complete test one ha　　Under development environment

yarn Run Start OK effect no problem look at the build time 9891ms Webpack3 17161ms in the comparison chart

:\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. UseNewAPI on '. Hooks ' Insteadi WDS?: Project was running at http://localhost:8072/I WDS?: Webpack output is served from/i-WDS?: Content not from Webpack are served from C:\USERS\HBOXS022\DESKTOP\WEBPACK4\SRCHAPPY[JS]: all set; signaling W Ebpack 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:webpack4.1.1time:9891msbuilt at:2018-3-28 18:49:25

　　 In the production environment

Yarn Run Build

OK third Party library jquery packed into the common. Public JS code packaged into vendor public style is also packaged into the ventor behind the separation into VENDOR.CSS

There's no problem with the directory structure. The module ID is also fixed

Now let's see the speed comparison.

Webpack3

Webpack4 is my illusion? = =

Finally, if you have a webpack4 github link, help yourself to a star. = I was shaking my blog for the first time.

Remember once WEBPACK3 upgrade Webpack4 pit