Webpack Best Practice Series (2)

3. Plugins

In the rapid development of the front-end today, many do not have a lot of technical content and feel is a waste of time things, can be given to build tools to do, such as: we go to manually create index.html, Manual introduction of packaged JS files and other operations, can call a webpack to do, help us improve efficiency, so , you just need to understand that plug-ins are actually some of the extensions of Webpack that are designed to help us to prompt the efficiency of the tool

3.1.html-webpack-plugin Plug-in

This plugin is to help us automatically generate HTML files and automatically introduce packaged JS files

1. Plug-in installation

NPM Install Html-webpack-plugin--save-dev

　　

2. Modify the Webpack configuration for the plugin to take effect

Const PATH = require (' path ')//introduce plugin const HTMLWEBPACKPLUGIN = require (' Html-webpack-plugin '); module.exports = {    Entry: './src/index.js ',    output: {        path:path.resolve (__dirname, ' dist '),        filename: ' App.js '    },    plugins: [        //Add plugin        new Htmlwebpackplugin ()    ]}

　　

3. Run the View effect

NPM Run Dev

　　

4. Other Common configuration Items

Const PATH = require (' path ')//introduce plugin const HTMLWEBPACKPLUGIN = require (' Html-webpack-plugin '); module.exports = {    Entry: './src/index.js ',    output: {        path:path.resolve (__dirname, ' dist '),        filename: ' App.js '    },    plugins: [        //Add plugin        new Htmlwebpackplugin (            //within this plugin, you can specify the template and custom generated filename            {                filename: ' Main.html ',                Template: ' src/index.html '            }        )    ]}

　　

With the above two configurations, this plugin helps generate a main.html, and is based on the template generated

4.devserver

Webpack-dev-server provides you with a simple Web server and is able to reload (live reloading) in real time.

4.1. Installing Webpack-dev-server

NPM Install Webpack-dev-server--save-dev

　　

Modify the Package.json configuration file and add the following code to the script option:

"Start": "Webpack-dev-server",

　　

The entire Package.json configuration file is as follows:

{  "name": "Code",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    " Dev ":"./node_modules/webpack/bin/webpack.js ",    " Start ":" Webpack-dev-server ",    " test ":" Echo \ "Error:no test Specified\ "&& exit 1"  },  "keywords": [],  "author": "",  "license": "ISC",  " Devdependencies ": {    " html-webpack-plugin ":" ^2.30.1 ",    " Webpack ":" ^3.10.0 "  }}

　　

Run the command at the terminal:

NPM start

　　

After the command is started, access via http://localhost:8080/

4.2. Let the tool automatically open the server address to US

adding configurations in Webpack.config.js

devserver:{    Open:true}

　　

Where open:true means to open the browser automatically

4.3. Modify the server port

To add a configuration item in Webpack.config.js

devserver:{    open:true,    port:8090}

　　

Where port behind gives a custom port

4.4. Set the default Access directory

devserver:{    open:true,    port:8090,    contentbase: './dist '}

5.loader5.1. What is loader?

Loader allows Webpack to handle non-JavaScript files (Webpack itself only understands JavaScript). Loader can convert all types of files to valid modules that Webpack can handle, and then you can take advantage of Webpack's packaging capabilities to handle them.

Essentially, Webpack loader converts all types of files into modules that the application's dependency graph can directly reference.

At a higher level, the loader has two targets in the Webpack configuration.

1. Identify those files that should be converted by the corresponding loader. (Use the Test property)
2. Convert these files so that they can be added to the dependency graph (and eventually added to the bundle) (use property)

Summary: With the loader,webpack will be the non-JS file also as a module, and can reference it

5.2. Support CSS File packaging

Installing Css-loader

NPM Install Css-loader--save-dev

　　

Modify the Webpack.config.js file to add css-loader configuration items

module:{        Rules: [           {                test:/\.css$/, use               : [' Css-loader '           }        ]    }

　　

Full Webpack.config.js file:

Const PATH = require ("path") const Htmlwebpackplugin = require ("Html-webpack-plugin") Module.exports = {    entry: "./ Src/index.js ",    output: {        path:path.resolve (__dirname, ' dist '),        filename: ' App.js '    },    Plugins: [        new Htmlwebpackplugin ({            Template: './src/index.html ',            filename: ' index.html '        })    ],    devserver:{        open:true,        contentbase: './dist '    },    module:{        rules: [           {                Test:/\.css$/, use               : [' Css-loader '           }]        }    }

　　

After the configuration is complete, the test is in effect, first create a new index.css, add content:

body{    background: #009f95}

　　

Introducing INDEX.CSS files in the Index.js file

Import Module_1 from './module_1 ' import module_2 from './module_2 ' import module_3 from './module_3 ' document.write (" Hello world ") import"./index.css "Module_1 () module_2 () Module_3 ()

　　

Run the command to see the effect:

NPM start

　　

At this point, the discovery does not have any effect, because Css-loader is only responsible for the CSS files packaged into JS, and not added to the index.html structure, but also need to introduce style-loader to handle, let style style into the index.html structure

NPM Install Style-loader--save-dev

　　

Next, you need to configure the Style-loader in the Webpack.config.js file

module:{        Rules: [           {                test:/\.css$/, use               : [' Style-loader ', ' Css-loader '           }        ]}

　　

Run NPM start again to see the effect

Webpack Best Practice Series (2)