上一节的入门中,只是跑通了一个很简单的webpack项目的流程,对其中的参数以及实战运用中的一些用法并不太清楚,虽然目前工作项目中并没有用起webpack,不过觉得还是需要再去摸索一番,以便可以更清楚的用起这个工具。
上一节最终运行webpack命令,会在dist目录下生成一个js文件,这时候新建一个index.html文件并引入这个js:
index.html
This is a test这中间的f9be197eff25e8667c8c就是上一次运行webpack命令时生成的hash值,如果每次对js改动,然后运行webpack命令,都会引起hash值的变化,也就是说每次都得在index.html中改变引入js的名称,这样显然不合理,这时候可以引入一些插件来进行一些流程上的优化。
html-webpack-plugin可以根据你设置的模板,在每次运行后生成对应的模板文件,同时所依赖的CSS/JS也都会被引入,如果CSS/JS中含有hash值,则html-webpack-plugin生成的模板文件也会引入正确版本的CSS/JS文件。
安装(Install)
npm install html-webpack-plugin --save-dev
引入
在webpack.config.js中引入:
const HtmlWebpackPlugin = require('html-webpack-plugin');
配置
module.exports = {
entry: './app/index.js',
output: {
...
},
module: {
...
},
plugins: [
new HtmlWebpackPlugin({
title: "This is the result",
filename: "./index.html",
template: "./app/index.html",
inject: "body",
favicon: "",
minify: {
caseSensitive: false,
collapseBooleanAttributes: true,
collapseWhitespace: true
},
hash: true,
cache: true,
showErrors: true,
chunks: "",
chunksSortMode: "auto",
excludeChunks: "",
xhtml: false
})
]
};
然后看一下这些参数的意义:
title: 生成的HTML模板的title,如果模板中有设置title的名字,则会忽略这里的设置
filename: 生成的模板文件的名字
template: 模板来源文件
inject: 引入模块的注入位置;取值有true/false/body/head
favicon: 指定页面图标;
minify: 是html-webpack-plugin中集成的 html-minifier ,生成模板文件压缩配置,有很多配置项,可以查看详细文档
caseSensitive: false, //是否大小写敏感
collapseBooleanAttributes: true, //是否简写boolean格式的属性如:disabled="disabled" 简写为disabled
collapseWhitespace: true //是否去除空格
hash: 是否生成hash添加在引入文件地址的末尾,类似于我们常用的时间戳,比如最终引入是:。这个可以避免缓存带来的麻烦
cache: 是否需要缓存,如果填写true,则文件只有在改变时才会重新生成
showErrors: 是否将错误信息写在页面里,默认true,出现错误信息则会包裹在一个pre标签内添加到页面上
chunks: 引入的模块,这里指定的是entry中设置多个js时,在这里指定引入的js,如果不设置则默认全部引入
chunksSortMode: 引入模块的排序方式
excludeChunks: 排除的模块
xhtml: 生成的模板文档中标签是否自动关闭,针对xhtml的语法,会要求标签都关闭,默认false
[3]