Webpack Starter Series 2

The first introduction to the use of Webpack to do the most basic packaging, the next talk about the advanced Webpack.

1. Build the local server using Webpack:

　　Want to let your browser listen to your code changes, and automatically refresh the display of the modified results, in fact, Webpack provide an optional local development server, the local server based on node. js Build, you can achieve the functions you want, but it is a separate component, You need to install it separately as a project dependency before you configure it in Webpack

NPM Install--save-dev webpack-dev-server-g

　　Devserver as one of the Webpack configuration options, here are some of its configuration options, and more configuration can refer to this

configuration options for Devserver	Function description
Contentbase	The default Webpack-dev-server provides a local server for the root folder. If you want to provide a local server for a file in another directory, you should set the directory where it is located (this example is set to the "public" directory)
Port	Set default listening port, if omitted, default to "8080"
Inline	Set to True to automatically refresh the page when the source file changes
Historyapifallback	Very useful 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

Add these commands to the Webpack configuration file, and the configuration file webpack.config.js now looks like this:

Module.exports = {    entry: __dirname + "/app/main.js",//The only entry file that has been mentioned several times    output: {        path: __dirname + "/public",/ /packed file where filename is stored        : "Bundle.js"//package output file filename    },    devserver: {        contentbase: "./public",// The local server loaded page is located in the directory        historyapifallback:true,//Do not jump inline:true//        real-time Refresh    }}

package.json in the scripts object, add the following command to open the local server:

  "Scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1",    "Start": "Webpack"  }

Enter npm run server in the terminal to view the results 8080 on the local port

　　

2, Loaders

　　Then there is the famous loaders !

　　LoadersIs webpackOne of the most exciting features available. By using a different loader， webpackAbility to invoke external scripts or tools for processing files of different formats, such as analyzing conversionsSassForCSS, or convert the next generation JS file (ES6,ES7) to a modern browser-compatible JS file,ReactDevelopment, the right loaders can be used in the reactJSXConvert the file to a JS file. So if we need to add a CSS file to the app, we need to use theCss-loaderAndStyle-loaderAnd they do two different things,Css-loaderWill traverse the CSS file and findURL ()expressions and then process them,Style-loaderThe original CSS code is inserted into a style tag on the page. Next we use the following command to install Css-loader and Style-loader (parameter-G is required for global installation).

CNPM Install Css-loader Style-loader

After executing the above command, css-loader and style-loader are installed in the Node_modules directory.

Next, create a new CSS file in the app directory with the following code:

body{  background-color:green;  }

ModifyMain.jsFile with the following code:

Main.js require ("!style-loader!css-loader!. /style.css "), const Greeter = require ('./greeter.js ');d ocument.queryselector (" #root "). AppendChild (Greeter ());

Next we use the Webpack command to package:

start can be used: NPM start

Note: before Css-loader and Style-loader if the global security, in the packaging may be error, these two dependencies can not be found. You can then use the following code to resolve:

NPM link CSS-LOADERNPM Link style-loader

In browser access, the output is as follows:

Require CSS files to write loader prefix !style-loader!css-loader!, of course, we can according to the module type (extension) to automatically bind the required loader. main.js the require ("!style-loader!css-loader!. /style.css ") modified to require ("./style.css ") :

Main.js require ("./style.css"), const Greeter = require ('./greeter.js ');d ocument.queryselector ("#root"). AppendChild (Greeter ());

Then execute:

Webpack app/main.js-o public/bundle.js--module-bind "Css=style-loader!css-loader"

Access in the browser, the effect of the same.

3. Configuration files

　　We can put some of the compilation options in the configuration file (webpack.config.js) for unified management:

Module.exports = {    entry: "./runoob1.js",    output: {        path: __dirname,        filename: "Bundle.js"    },    module: {//New profile        rules: [            {test:/\.css$/, Loader: ' Style-loader!css-loader '}        ]    },
Devserver: {
Contentbase: "./public",
Historyapifallback:true,
Inline:true
}

};

4. Plugins　

Plug-ins are specified in the Webpack configuration information plugins option and are used to complete some loader that cannot be completed.

Webpack comes with some plugins, you can install some plugins through CNPM.

Using the built-in plugin requires the following command to install:

CNPM Install Webpack--save-dev

For example, we can install the built-in Bannerplugin plug-in to output some comment information at the head of the file. To modify Webpack.config.js, the code is as follows:

var webpack = require (' Webpack '); module.exports = {    entry: __dirname + "/app/main.js",//The only portal file output that has been mentioned several times    : { C3/>path: __dirname + "/public",//the place where the packaged files are stored        filename: "bundle.js"//package output file filename    },    devserver: {        Contentbase: "./public",//the directory where the local server loads the page        historyapifallback:true,//Do not jump inline:true//        real-time Refresh    },    module: {//Add config file        rules: [            {test:/\.css$/, Loader: ' Style-loader!css-loader '}        ]    },    Plugins: [//For Output annotation information        new webpack. Bannerplugin (' Note: Post-compilation file! ')    ]}

then run it, open bundle.js, and you can see that the file header appears with our specified comment information.

Webpack Starter Series 2