Home > Developer > Web Develop
webpackwebpackwebpack.config.jspluginspluginsThere 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.
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.
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.
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.jsthe 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.jsThe contents are as follows:
console.log(‘这是第一个入口文件‘);
2.jsThe 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.
Next to html-webpack-plugin the configuration parameters to demonstrate, plus these parameters, the page will become sour and moving!
1. Create a templatesrcCreate 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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
