上一节的入门中,只是跑通了一个很简单的webpack项目的流程,对个中的参数以及实战应用中的一些用法并不太清晰,虽然现在事情项目中并没有效起webpack,不过以为照样须要再去探索一番,以便能够更清晰的用起这个东西。
上一节终究运转webpack敕令,会在dist目次下天生一个js文件,这时候新建一个index.html文件并引入这个js:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a test</title>
</head>
<body>
<div id="test">Start:</div>
<script src="bundle.f9be197eff25e8667c8c.js"></script>
</body>
</html>
这中心的f9be197eff25e8667c8c
就是上一次运转webpack敕令时天生的hash值,假如每次对js修改,然后运转webpack
敕令,都邑引发hash值的变化,也就是说每次都得在index.html
中转变引入js的称号,如许明显不合理,这时候能够引入一些插件来举行一些流程上的优化。
html-webpack-plugin
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添加在引入文件地点的末端,类似于我们经常使用的时候戳,比方终究引入是:
<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>
。这个能够防止缓存带来的贫苦cache: 是不是须要缓存,假如填写true,则文件只要在转变时才会从新天生
showErrors: 是不是将错误信息写在页面里,默许true,涌现错误信息则会包裹在一个
pre
标签内添加到页面上chunks: 引入的模块,这里指定的是entry中设置多个js时,在这里指定引入的js,假如不设置则默许悉数引入
chunksSortMode: 引入模块的排序体式格局
excludeChunks: 消除的模块
xhtml: 天生的模板文档中标签是不是自动封闭,针对xhtml的语法,会请求标签都封闭,默许false
我的WebPack入门(一)
[3]