plugins(插件)
插件是 webpack 的 支柱 功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！
插件目的在于解决 loader 无法实现的其他事
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //以此插件为例，请先npm install html-webpack-plugin -S 安装
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'js/bundle.js'
},
plugins: [
new HtmlWebpackPlugin()，
new webpack.ProgressPlugin(),
]
}
以上示例就是使用了一个 html-webpack-plugin 插件，plugins 可见是一个数组，很明显，这里可以放入各种不同的插件
html-webpack-plugin插件
HtmlWebpackPlugin 简化了 HTML 文件的创建，你可以让该插件为你生成一个 HTML 文件，使用一定的模版，可以自己创建的模版，也可以是lodash 模板
安装
npm install --save-dev html-webpack-plugin
配置项
这里我们就简单介绍一下常用的配置项，想要了解更多的，请移步 github.com/jantimon/ht… 查阅
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="shortcut icon"
href=""
/>
<title>webpack test</title>
</head>
<body>
<div id='root'></div>
<!-- 这是注释1 -->
<!-- 这是注释2 -->
</body>
</html>
以上是我们创建在和 webpack.config.js 同级目录下的一个index.html文件，作为一个模版文件
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'js/bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})，
]
}
我们在 HtmlWebpackPlugin 里配置参数 template 后，运行打包命令，在dist文件夹下就会发现打包生成了一个名为index.html的文件，打开后可以发现：
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="shortcut icon"
href=""
/>
<title>webpack test</title>
<script defer src="js/bundle.js"></script>
</head>
<body>
<div id='root'></div>
<!-- 这是注释1 -->
<!-- 这是注释2 -->
</body>
</html>
里面的内容就是我们配置的template模版，不同的是，webpack自动帮我们在head元素中插入了一行<script defer src="js/bundle.js"></script>，而这里的src也已经给我们按照我们output中设置的路径和文件名进行了js文件的引用，这就是它神奇之处。
接着，我们继续了解 HtmlWebpackPlugin 其他的配置参数：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'js/bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'main.html',
inject: 'body',
})，
]
}
基于以上的修改，我们再打包一下，然后发现，在dist文件夹下生成了一个main.html文件，打开后的内容：
// dist/main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="shortcut icon"
href=""
/>
<title>webpack test</title>
</head>
<body>
<div id='root'></div>
<!-- 这是注释1 -->
<!-- 这是注释2 -->
<script defer src="js/bundle.js"></script>
</body>
</html>
从这次改变中我们可以知道，filename 配置参数就是用来命名打包后的html文件名称，若不配置该参数，则默认打包后生成的是index.html，我们在这里给他配置了filename: 'main.html'，则打包后生成的文件叫 main.html，而inject: 'body'则是用来配置<script></script>元素插入在html文档哪个位置，我们设了body，则他是插入在body元素中最下方，若不配置，则默认插入在head元素中，当然该参数还有inject: 'head' inject: false inject: true等,head则插入在head元素中，若设为false则不插入script元素
接下来我们修改一下我们的html模版：
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="shortcut icon"
href=""
/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id='root'><%= htmlWebpackPlugin.options.custom %></div>
<!-- 这是注释1 -->
<!-- 这是注释2 -->
</body>
</html>
然后配置这几个参数：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'js/bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'main.html',
inject: 'body',
title: 'my webpack test',
scriptLoading: 'blocking',
publicPath: 'https://alicdn/com',
custom: '这是一个自定义配置项，key名自己取的叫custom'
})，
]
}
再进行打包,然后打开dist文件夹下面的main.html文件：
// dist/main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="shortcut icon"
href=""
/>
<title>my webpack test</title>
</head>
<body>
<div id='root'>这是一个自定义配置项，key名自己取的叫custom</div>
<!-- 这是注释1 -->
<!-- 这是注释2 -->
<script src="https://alicdn/com/js/bundle.js"></script>
</body>
</html>
好，根据打包内容，我们就来解释一下这些参数，title 用来配置<title></title>元素的内容，我们需要使用ejs模版的写法在html模版中写好<title><%= htmlWebpackPlugin.options.title %></title>来获取，同样，我们自定义配置了一个参数，取名叫custom，然后同样是在html模版中写入<div id='root'><%= htmlWebpackPlugin.options.custom %></div>，在这里打包后就能在这个元素中插入custom的值了，我们可以在打包生成后的html中通过 htmlWebpackPlugin.options.xxx的方法获取到配置参数中的任意值。scriptLoading 用来配置script元素加载是异步加载还是阻塞加载，他的值可以是 'blocking' || 'defer'，blocking是阻塞加载，defer是异步加载，可以看到我们配置了scriptLoading: 'blocking'后，<script src="https://alicdn/com/js/bundle.js"></script>中已经没有defer这个属性了,但是src却多了个 https://alicdn/com/ 前缀，这是因为我们配置了 publicPath 参数，这个参数在我们发布到生产环境中去对应到公共域名下进行文件引用时就显得比较重要了。
最后我们介绍一下minify这个配置参数
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'js/bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
minify: {
collapseWhitespace: true, //去除空格
removeComments: true //去除注释
}
})，
]
}
minify起到压缩html文件的作用，我们可以通过collapseWhitespace来去除空格，removeComments用来去除注释，关于minify更多的参数配置，可见 github.com/jantimon/ht… 查阅，打包后我们可以发现，生成的文件被去除了注释和空格
这里我们就简单介绍 html-webpack-plugin 插件的几种配置参数。
更多的插件
我们介绍了一个关于html打包的插件，也是比较常用的插件，更多的插件就不一一赘述，有需求的可以查阅 webpack.docschina.org/plugins/
好了，关于plugins插件我们就先介绍到这了
