1. 引言
在上一篇当中我们讲了如何通过webpack打包带hash的(或者说是版本号)的文件。这里,引申出来一个问题:文件名是不固定的,那岂不是每次打包后要去修改引用?
这么麻烦,当然不可能这么做。下文就来讲讲如何借用webpack的插件来解决这个问题。
2. 生成html页面
(1) 安装插件
在Terminal中安装html-webpack-plugin
插件。
npm install html-webpack-plugin --save-dev
(2) 引用插件
在webpack.config.js中require该插件,并加上plugins这一项。
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry: {
main: './src/script/main.js',
a: './src/script/a.js'
},
output:{
path: path.resolve(__dirname, 'dist/js'),
filename: "[name]-[chunkhash].bundle.js"
},
plugins:[
new htmlWebpackPlugin()
]
}
npm run webpack
后可以看到dist文件夹中生成打包后的html,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="main-d02880881ec2455f025c.bundle.js"></script><script type="text/javascript" src="a-3af0762ff7b4e6ff9f7c.bundle.js"></script></body>
</html>
js的引用的确为带有hash的文件了。但是,哪里不对?
再看一下src中的index.html的源文件,如下,title标签中的文字是不一样的。
<title>webpack demo</title>
这说明了打包后的index.html和源文件的index.html没有任何关系。这显然是不满足需求的。
(3) 给插件添加模板
[1] 指定模板
如何解决上述问题呢?需要给插件给插件指定一个模板。
plugins:[
new htmlWebpackPlugin({
template: 'index.html'
})
]
打包后,title发生了改变,与源文件中一致了。这样,两者就绑定起来了。
但是,还是有个问题。所有打包的内容都在dist->js中,而index.html我们并不希望放到这个文件夹了,因为不属于js,也不符合规范。
[2] 修改输出路径
这里,我们需要修改output,将输出的目标位置改为dist,同时,给js需要输出的位置增加相对路径。
【修改前】
output:{
path: path.resolve(__dirname, 'dist/js'),
filename: "[name]-[chunkhash].bundle.js"
},
【修改后】
output:{
path: path.resolve(__dirname, 'dist'),
filename: "js/[name]-[chunkhash].bundle.js"
},
(4) html-webpack-plugin参数
[1] filename
此时打包后的index.html不带hash。通过html-webpack-plugin提供的参数可以解决这个问题。如下,增加了filename的属性。
plugins:[
new htmlWebpackPlugin({
filename:'index-[hash].html',
template: 'index.html'
})
]
[2] inject
使用inject可以设置js的引用是放在body中还是放在head中(不设置,默认放在body中),如下。
plugins:[
new htmlWebpackPlugin({
filename:'index-[hash].html',
template: 'index.html',
inject: 'head'