webpack4系列笔记之（4）plugins 让打包更便捷

一、webpack的plugins是什么？

plugins是webpack执行打包过程中某个节点，需要的做的事情，这篇文章主要讲解 HtmlWebpackPlugin 和CleanWebpackPlugin两个插件；

备注：本文node版本10.13.0 ，webpack版本4.26.0 webpack-cli版本3.1.2

二、HtmlWebpackPlugin作用及使用

1、HtmlWebpackPlugin的作用是：在webpack打包项目结束时，生成一个html文件，并将打包好的js文件引入到html中；
2、HtmlWebpackPlugin 的使用

• 安装HtmlWebpackPlugin

   npm i html-webpack-plugin -D
  

• 配置 HtmlWebpackPlugin

    const path = require('path');
    // 引入HtmlWebpackPlugin
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
    	//  入口文件
    	entry: './src/index.js',
    	output: {
    		// 输出文件名
    		filename: 'built.js',
    		// 输出文件路径
    		path: path.resolve(__dirname,'dist')
    	},
    	plugins: [
    			// 使用 HtmlWebpackPlugin
    			new HtmlWebpackPlugin({
    				// 传入一个生成html的模板
    				template: 'src/index.html'
    			})
    	]
    	// 打包模式有两种：development和production；默认是production模式，会自定压缩代码
    	mode: 'development'
    }
  

三、CleanWebpackPlugin作用及使用

1、CleanWebpackPlugin的作用是：在webpack打包开始是，自动删除之前打包的文件dist；
2、CleanWebpackPlugin的使用

• 安装 CleanWebpackPlugin

    npm i clean-webpack-plugin -D
  

• 配置CleanWebpackPlugin

    const path = require('path');
    	// 引入HtmlWebpackPlugin
    	const HtmlWebpackPlugin = require('html-webpack-plugin')
    	// 引入CleanWebpackPlugin
    	const CleanWebpackPlugin = require('clean-webpack-plugin')
    	module.exports = {
    		//  入口文件
    		entry: './src/index.js',
    		output: {
    			// 输出文件名
    			filename: 'built.js',
    			// 输出文件路径
    			path: path.resolve(__dirname,'dist')
    		},
    		plugins: [
    				// 使用 HtmlWebpackPlugin
    				new HtmlWebpackPlugin({
    					// 传入一个生成html的模板
    					template: 'src/index.html'
    				}),
    				// 使用 CleanWebpackPlugin
    				new CleanWebpackPlugin(['dist'])
    		]
    		// 打包模式有两种：development和production；默认是production模式，会自定压缩代码
    		mode: 'development'
    	}