// webpack.config.js entry: { index: path.resolve(__dirname, './src/index.js'), index1: path.resolve(__dirname, './src/index1.js'), index2: path.resolve(__dirname, './src/index2.js') } ... plugins: [ new HtmlWebpackPlugin({ ... chunks: ['index','index2'] }) ]
执行 webpack 命令之后，你会看到生成的 index.html 文件中，只引用了 index.js 和 index2.js
... <script type=text/javascript src=https://www.jb51.net/index.js></script> <script type=text/javascript src=https://www.jb51.net/index2.js></script>
而如果没有指定 chunks 选项，默认会全部引用。
excludeChunks
弄懂了 chunks 之后，excludeChunks 选项也就好理解了，跟 chunks 是相反的，排除掉某些 js 文件。 比如上面的例子，其实等价于下面这一行
... excludeChunks: ['index1.js']
chunksSortMode
这个选项决定了 script 标签的引用顺序。默认有四个选项，'none', 'auto', 'dependency', '{function}'。
'dependency' 不用说，按照不同文件的依赖关系来排序。
'auto' 默认值，插件的内置的排序方式，具体顺序这里我也不太清楚...
'none' 无序？ 不太清楚...
{function} 提供一个函数？但是函数的参数又是什么? 不太清楚...
如果有使用过这个选项或者知道其具体含义的同学，还请告知一下。。。
xhtml
一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。
总结
以上，就总结完了传入 new HtmlWebpackPlugin() 的选项，了解全部选项的含义后，可以在项目构建时更灵活的使用。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: