目录
五、插件plugins
5.1、插件概要
5.1、HTML Webpack Plugin（创建HTML插件）
5.2、Mini-css-extract-plugin（单独提取CSS插件）
5.3、clean-webpack-plugin（删除或清理构建目录）
5.4、常用plugins
5.4.1、用于修改行为
5.4.2、用于优化
5.4.3、其它
六、DevServer开发服务器
6.1、快速开启DevServer
6.2、参数设置
七、视频
八、示例
九、作业
五、插件plugins
5.1、插件概要
Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。
插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。
webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
[](javascript:void(0); "复制代码")
ConsoleLogOnBuildWebpackPlugin.js[const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log("webpack 构建过程开始！");
});
}
}
](javascript:void(0); "复制代码")
compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，以便它可以在所有 hook 中复用。
由于插件可以带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。
根据你的 webpack 用法，这里有多种方式使用插件。
[](javascript:void(0); "复制代码")
webpack.config.js[const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.(js|jsx)$/,
use: 'babel-loader' }
]
},
plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'})
]
};module.exports = config;
](javascript:void(0); "复制代码")
5.1、HTML Webpack Plugin（创建HTML插件）
该个插件的作用是用来自动生成html页面，既可以生成单个页面又可以生成多个页面，并且在生成前可以给它一些的配置参数，它会按照你想要的生成方式去生成页面。
第一步：安装
npm i html-webpack-plugin -D
第二步：在webpack.config.js里引入模块
const HtmlWebpackPlugin=require('html-webpack-plugin');
第三步：在webpack.config.js中的plugins对象里new一个实例
plugins:[ new HtmlWebpackPlugin({参数})
]
结果
[](javascript:void(0); "复制代码")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js' },
plugins: [ new HtmlWebpackPlugin()
]
}
[
](javascript:void(0); "复制代码")
参数：
title
生成页面的titile元素
filename
生成的html文件的文件名。默认index.html，可以直接配置带有子目录
](javascript:void(0); "复制代码")
//webpack.config.js[
...
plugins: [ new HtmlWebpackPlugin({
...
filename: 'index1.html'//可带子目录'html/index1.html'
})
]
](javascript:void(0); "复制代码")
template
模版文件路径
templateParameters
{Boolean|Object|Function} 允许覆盖模板中使用的参数
](javascript:void(0); "复制代码")
//webpack.config.js[
...
plugins: [ new HtmlWebpackPlugin({
...
templateParameters: {
title: 'xxxx',
favicon: './favicon/index.ico',
}
})
]
](javascript:void(0); "复制代码")
inject
插入的script插入的位置，四个可选值:
true: 默认值，script标签位于html文件的body底部
body: 同true
head: script标签位于html文件的head标签内
false: 不插入生成的js文件，只是生成的html文件
favicon
为生成的html文件生成一个favicon，属性值是路径
minify
对html文件进行压缩。属性值是false或者压缩选项值。默认false不对html文件进行压缩。
html-webpack-plugin中集成的html-minifier，生成模板文件压缩配置，有很多配置项，这些配置项就是minify的压缩选项值。
hash
给生成的js文件尾部添加一个hash值。这个hash值是本次webpack编译的hash值。默认false;
](javascript:void(0); "复制代码")
//webpack.config.js
...
plugins: [ new HtmlWebpackPlugin({
...
hash: true })
] //html