[Go] webpack3 Latest Version Configuration study (v) devtool,webpack-dev-server,commonschunkplugin

Devtool

Devtool is the webpack in the config comes with the property as long as the use of it can not install
Webpack's official website is explained below
When Webpack packages source code, it may be difficult to trace errors and warnings to the original location in the source code. For example, if you package three source files (A.js, b.js, and c.js) into one bundle (bundle.js), and one of the source files contains an error, the stack trace simply points to bundle.js. This is not usually helpful because you may need to know exactly which source file the error came from. To make it easier to track errors and warnings, JavaScript provides the source map functionality to map the compiled code back to the original source code. If an error comes from the B.js,source map, it will tell you clearly.

//webpack.config.js//add an officially recommended entry above Devtool: For development environment Eval-source-map-Each module is executed using eval (), and Sourcemap is converted to Dataurl after it is added to eval (). Initializing the Sourcemap is slow, but it provides rapid speed when rebuilding and generates actual files. The number of rows can be mapped correctly because they are mapped to the original code. //Add Property Module.exports = {devtool:  ' Eval-source-map '}//comment out compression plugin //new Webpack.optimize.UglifyJsPlugin ({//compress: {//warnings:false,//},//output: {//comments:false,//}//}), //test error message, completed the deletion // Index.jsconsol. log ( ' 123 ');         

Then compile it and it will appear as

Webpack-dev-server

NPM Install Webpack-dev-server

//Package.json in script add "Devserver": "Webpack-dev-server--inline",//webpack.config.jsconst Devserver = require (' webpack-dev-server ')//moduledevserver: {historyapifallback:true,  Inline:true, Contentbase:path.  Join (__dirname, "public"), Compress: true, Port: 9000} //plugin add new Webpack. Hotmodulereplacementplugin ()               

Then running NPM run Derserver can see the effect in localhost:9000/index.html, using this will not generate the public folder, all the code will be put in memory!

Commonschunkplugin

Commonschunkplugin is the webpack of the plug-in direct use can be
Commonschunkplugin

Webpack.config.jsProvide common code, plugins addThe default is to extract the public code for all the ingress nodes, generating a common.js//New Webpack.optimize.CommonsChunkPlugin (' Common.js ')Extract only the index node and the Extract node//New Webpack.optimize.CommonsChunkPlugin (' Common.js ', [' Index ',' Extract '])Here we useNew Webpack.optimize.CommonsChunkPlugin ({Name"Common",Minchunks:2//Minimum two entry file JS at the same time as reference package})Modify the program used in the webpack.config.js to push to plugins, plus push (' Common ');Const HTMLARRAY = [' Index ',' Extract '];htmlarray.foreach(element) = {Const Chunksarray = [element];if (element = = =' index ') {Chunksarray.push (' entry '); } Chunksarray.push (' Common ');The public code-out package is also considered a chunks so you can push in hereConst NEWPLUGIN =New Htmlwebpackplugin ({filename:element + '. html ', //get the original HTML last shift inject:  ' body ', //- Hash: true, //add a hash after the generated file to prevent cache Chunks:chunksarray}); module. exports.plugins.push (Newplugin);}); /new file console. Jsconsole. Log ' 1234567 ');//index.js and extract. JS added require (   

NPM run Webpack found Console.log (' 1234567 ') in Common.js; Other index.js and extract.js are not, which makes the code more reusable, and saves the bandwidth of file notconsistent, but also can be used in a number of places to use JS dozen commonly used packages

[Go] webpack3 Latest Version Configuration study (v) devtool,webpack-dev-server,commonschunkplugin