Webpack configuration file Related commentary

webpack-What is Webpack:webpack can be seen as a modular baler: The thing it does is to analyze your project structure, find JavaScript modules and other extensions of languages (scss,typescript, etc.) that some browsers can't run directly It is converted and packaged into the appropriate format for use by the browser. -Webpack work Style: Take your project as a whole, With a given master file (for example: Index.js), Webpack will start to find all dependent files for your project from this file, use loaders to process them, and finally package them as one (or more) browser-aware JavaScript files.

-Installation Webpack

1 // Global Installation 2  Install-g webpack3// installation to project directory 4 install Webpack-- Save-dev

-Common Webpack configuration files

1Const WEBPACK = require (' Webpack ');2Const Htmlwebpackplugin = require (' Html-webpack-plugin ');//HTML parsing Import3Const Extracttextplugin = require (' Extract-text-webpack-plugin ');4 5 //__dirname is a global variable in node. js that points to the directory where the current execution script resides6Module.exports = {7Entry: __dirname + "/app/main.js",//Unique Portal File8 output: {9Path: __dirname + "/build",//file path to output after packagingTenFileName: "Bundle-[hash].js"//file name of the output after packaging One         }, ADevtool: ' None ', -         //Add the Webpack-dev-server command to the Scripts object in Package.json to turn on the local server - devserver: { theContentbase: "./public",//The directory where the page loaded by the local server is located -             //when developing a single-page application, it relies on the HTML5 history API, and if set to true, all jumps will point to index.html, i.e. not jump -Historyapifallback:true, -Inlinetrue,//automatically refresh the page when the source file changes +Hottrue //Hot Load -         }, +         //Configure Loader A         //parsing rules for modules at module: { - rules: [ -               //JS match all JS, with Babel-loader translation ruled out Node_modules -               { -Test:/(\.jsx|\.js) $/, - Use : { inLoader: "Babel-loader" -                 }, toExclude:/node_modules/ +               }, -               //CSS Use if multiple loader, write from right to left the               { *test:/\.css$/, $ use:[Panax Notoginseng                   { -Loader: "Style-loader" the                   },{ +Loader: "Css-loader" A                   } the                 ] +               }, -               // Less $               { $test:/\.less$/, - use:[ -                   { theLoader: "Style-loader" -                   },{WuyiLoader: "Css-loader" the                   },{ -Loader: "Less-loader" Wu                   } -                 ] About               }, $                //Configure the picture to convert Base64 only under 10000 bytes, otherwise output the original picture -               { -Test:/\. (png|jpe?g|gif|svg|cur) (\?. *)?$/, -Loader: ' Url-loader ', A options: { +limit:10000, theName:utils.assetsPath (' img/[name].[ Hash:7]. [ext] ') -                 } $               } the             ] the         } the     }, the plugins: [ -         //This plugin will add a note to the JS file after it is packaged:/*! copyright, pirated must investigate */ in         NewWebpack. Bannerplugin (' All rights reserved, pirated must investigate ')), the         //Htmlwebpackplugin: Based on a simple index.html template, generate a new index.html that automatically references your packaged JS file. the         //new An instance of this plugin, and pass in the relevant parameters, automatically inserted into the Dist directory About         NewHtmlwebpackplugin ({ the             //the template used theTemplate: __dirname + "/app/index.tmpl.html" the         }), +         //Hot Module Replacement (HMR) Thermal Load plugin: Allows you to automatically refresh the live preview modified effect After you modify the component code.  -         //the implementation of HMR in Webpack is also simple and requires only two configurations the         //Add the HMR plugin in the webpack configuration file;Bayi         //Add the "hot" parameter to true in the devserver of Webpack; the         NewWebpack. Hotmodulereplacementplugin (), the         NewWebpack.optimize.OccurrenceOrderPlugin (), -         NewWebpack.optimize.UglifyJsPlugin (), -         NewExtracttextplugin ("Style.css") the     ] the};

Loaders-By using different loader,webpack to have the ability to invoke external scripts or tools to implement the processing of files in different formats-such as parsing the conversion scss into CSS, or converting the next generation of JS files (ES6,ES7) into a modern browser-compatible JS file, For the development of react, the appropriate loaders can convert the jsx files used in react to JS files. -Loaders needs to be installed separately and needs to be configured under the Modules keyword in webpack.config.js, the loaders configuration includes the following:

Test:A regular expression that matches the extension name of the file that the loaders is working with (must) Loader:Name of the loader (required) Include/exclude:Manually add files (folders) that must be processed or block files (folders) that you do not need to process (optional); query:Additional setup options for loaders (optional)

Babel-babel is a JavaScript compiler that compiles the latest version of JavaScript into a version that can be executed now, in short, using Babel to make it easy to use these new and newest ES6, even ES7 syntax, in the current project. To put it bluntly is to make all kinds of javascript all sorts of languages specially for the browser to know. -Babel configuration options are placed in a separate configuration file named ". BABELRC"

The plugins-plug-in (plugins) is used to extend Webpack functionality, which takes effect throughout the build process and performs related tasks. -Loaders and plugins are often confused, but they are actually completely different things, so to say:

Loaders is used to process the source files during the package build process (jsx,scss,less. ), processing one at a time. Plug-ins do not directly manipulate a single file, it directly affects the entire build process.

-Webpack has a lot of built-in plugins, as well as a lot of third-party plugins that allow us to do a richer function. -plugin example explained in the above code

Webpack configuration file Related commentary