小邹发现后端开发者仍然使用很多工程化开发，比如webpack+vue+vuex，或者webpack+react+redux等，其实都离不开webpack这个强大的工具。 后续小邹会逐步给大家讲解一些关于webpack的知识点，希望对一些后端开发者有所帮助。
有哪些插件？
插件用于扩展webpack的功能。 各种插件可以让webpack做几乎任何与设置相关的事情。 该插件的配置非常简单。 插件配置项接收一个字段，该字段中的每一项都是要使用的插件的实例。 插件所需的参数是通过构造函数传入的。
举个栗子
使用插件的难点在于插件本身的配置项webpack文件分析，而不是如何将插件引入到webpack中。 几乎所有难以直接在 webpack 中实现的功能都可以通过开源插件来解决。 我们要做的就是根据自己的需要去寻找更多。 找到对应的插件。
HtmlWebpack插件
这个插件曝光率很高，主要有两个功能
title：生成html文件的标题
filename：输出html的文件名
template：html模板所在文件路径
根据自己指定的模板文件在来世创建一个特定的html文件。 这里的模板类型可以是任何你喜欢的模板，可以是html、jade、ejs、hbs等，并且需要注意的是，使用自定义模板文件时，需要提前安装对应的loader，否则webpack将无法正确解析。
如果您在模板中设置的标题和文件名冲突，以您配置的标题和文件名为准。
注入：注入选项。 有四个选项值true、body、head、false。
true：默认值，script标签位于html文件的body顶部 body：script标签位于html文件的body顶部（与true相同） head：script标签位于head标签里面 false：生成的js文件不插入，只是简单生成一个html文件（这个很少用）
favicon：为生成的html文件生成favicon。属性值为favicon文件所在的路径名
minify：minify的功能是压缩html文件，minify的属性值为压缩选项或false。 默认值为 false，生成的 html 文件不被压缩。
下面列出了一些常见的配置：
hash：hash选项的作用是给生成的js文件一个唯一的hash值，这个值就是webpack这次编译的hash值。 默认值为 false。 还看一个反例。
plugins: [
new HtmlWebpackPlugin({
hash: true
})
]
编译打包后
执行 webpack 命令后，您会听到生成的 html 文件的 script 标签中引用的 js 文件发生了一些变化。 Bundle.js文件后面的一串哈希值就是本次webpack编译对应的哈希值。
cache：默认为truewebpack文件分析，表示内容改变时生成新文件。
showErrors：这个是我们运行项目时经常用到的。 showErrors的作用是，如果webpack编译出现错误，webpack会将错误信息包裹在pre标签中。 该属性默认值为true，即显示错误信息。
打开此功能可以轻松定位错误
chunks：chunks主要用于多条目文件。 当你有多个入口文件时，然后编译生成多个打包文件，这样chunks就可以选择你要使用哪些js文件
entry: {
index: path.resolve(__dirname, './src/index.js'),
devor: path.resolve(__dirname, './src/devor.js'),
main: path.resolve(__dirname, './src/main.js')
}
plugins: [
new httpWebpackPlugin({
chunks: ['index','main']
})
]
编译后如下：
如果没有指定 chunks 选项，则默认全部引用。
exceptChunks：排除一些js，
entry: {
index: path.resolve(__dirname, './src/index.js'),
devor: path.resolve(__dirname, './src/devor.js'),
main: path.resolve(__dirname, './src/main.js')
}
plugins: [
new httpWebpackPlugin({
excludeChunks: ['devor.js']//和的等等效
})
]
编译后如下：
webpack4 和 html-webpack-plugin
使用最新版本的 html-webpack-plugin 您可能会遇到以下错误：
throw new Error(‘Cyclic dependency’ + nodeRep)
这个bug的原因是循环引用依赖，如果没有这个问题，可以忽略它。
目前的解决方案可以使用alpha版本
npm i –save-dev html-webpack-plugin@next 或者加入chunksSortMode: ‘none’就可以了。
但仔细查看文档发现设置 chunksSortMode:'none' 是有问题的。
该属性将决定块的加载顺序。 如果设置为none，则无法保证块在页面上加载的顺序，并且样式可能会被覆盖。 比如我在app.css上更改了一个第三方库element-ui的样式，并通过加载顺序覆盖了它，但是因为设置为none，所以打包后的结果变成了这样：
app.css先加载，之前写的样式覆盖就会失效，除非使用important或者其他css权重方法来覆盖，但这显然是不合理的。
Vue-cli 也恰好有这个相关问题。 尤玉溪也没有使用@next版本就破解了它。 如果你有兴趣，可以自己研究一下。
其他html-webpack-plugins的配置与之前相同。
