Through the previous article, we understand
webpack
Two configuration parameters of the inlet and outlet,
webpack
Will find the address of the entry file, go into a meal after the ravages, and then you give the output address will be compiled files to you. This article goes on to enrich
webpack.config.js
The content, say a parameter called
plugins
Plugins
plugins
There is a plug-in, webpack
there are a variety of plug-ins can help you complete any build things. You can't do it without what you can't imagine. And the world's small partners are to contribute to the webpack
open source plug-in, so the type of plug-ins is very rich.
What the plugin can do
The role of plug-ins is to improve the efficiency of development, to liberate hands, let us do more meaningful things. Some very low things will be given to the plug-in to complete. In the previous article, for example, when webpack
compiling the package, we need to create a new one index.thml
, and in the page through the script
tag to introduce the generated JS file, those stupid, waste of energy should be given to the plug-in automatic completion, this is called automation. All we need to do is focus on how the functionality is implemented and how to make meaningful events.
The difficulty of the plugin is not plugins
how to use the parameters, but how to use the plugin itself. Because each plug-in does not function the same, the required configuration parameters are different. To use this plug-in needs to write the parameters according to its requirements, so there is no uniform set of specifications, which requires you to be good at looking at the plugin API, through the Webpack official website or github
can find the plugin description.
Html-webpack-plugin
The following is a html-webpack-plugin
plugin for example, to show you the use of plug-ins. The purpose of this plugin is to automatically generate html
a page that can generate a single page and multiple pages, and you can give it a bunch of configurations before it is generated, and it will generate the page in the way you want it to build.
Small trial Sledgehammer
First step: Install
npm i html-webpack-plugin -D
Step two: webpack.config.js
introduce modules in
const HtmlWebpackPlugin=require(‘html-webpack-plugin‘);
Step three: in plugins
new
a
plugins:[ new HtmlWebpackPlugin()]
webpack.config.js
the content is as follows:
const path=require(‘path‘);const HtmlWebpackPlugin=require(‘html-webpack-plugin‘);module.exports={ entry:{ one:‘./src/1.js‘, two:‘./src/2.js‘ }, output:{ path:path.resolve(__dirname,‘dist‘), filename:‘[name].bundle.js‘ }, plugins:[ new HtmlWebpackPlugin() ]}
1.js
The contents are as follows:
console.log(‘这是第一个入口文件‘);
2.js
The contents are as follows
console.log(‘这是第二个入口文件!‘);
Fourth step: Execute the command in the terminal webpack
, if nothing unexpected is the following:
This represents the success of the project directory will automatically generate a dist
directory containing one and index.html
one one.bundle.js
and one two.bundle.js
. Open index.html
Source code, you can see that has automatically added two script
tags introduced two JS files respectively.
The Edge must be dew
Next to html-webpack-plugin
the configuration parameters to demonstrate, plus these parameters, the page will become sour and moving!
1. Create a template
src
Create a template file under the directory template.html
, with the following code:
<!DOCTYPE html>
2. Modify the configuration file
The webpack.config.js
changes plugins
are as follows:
plugins:[new Htmlwebpackplugin ({title: ' Chen Xuihui ',/* This value corresponds to the title*/in the HTML Template: './src/template.html ',//templates file address filename: ' test1.html ',//filename, default to index.html (path relative to Output.path value) Inject:true,//script label position, true/body for the </body> tag, head in
Remove the dist
directory and execute the command again at the terminal webpack
. A file is generated at the root of the project with the dist
following directory:
At this point to test1.html
open the source code as an example, it should be the following look
For html-webpack-plugin
Additional configuration parameters of the plugin, please refer to: Https://github.com/jantimon/html-webpack-plugin
Clean-webpack-pluginIn HtmlWebpackPlugin
the use of the time you need to dist
delete the directory to see the generated files, this is also a fool-like operation, clean-webpack-plugin
the plugin can do this thing
First step: Install
npm i clean-webpack-plugin -D
Step two: webpack.config.js
introduce modules in
const CleanWebpackPlugin=require(‘clean-webpack-plugin‘);
Step three: On plugins
the top of the new one
plugins:[ new CleanWebpackPlugin([‘./dist‘]), //这个一定要放在最上面,作用是先删除dist目录再创建新的dist目录。里面的参数为要删除的目录,放在一个数组里面 ...]
After you open the directory in the folder dist
and execute the command again in the terminal webpack
, you will see that the dist
directory is deleted and then created.
For clean-webpack-plugin
all configuration parameters of the plugin, please refer to: Https://github.com/johnagan/clean-webpack-plugin
Data download
Filed under: Webpack 4.X from beginner to proficient-devserver (iii)
Webpack 4.X from beginner to proficient-plugin (ii)