如果输出的文件带有 hash 值，我们不能每次都手动引入文件，所以，我们想要把打包好的文件自动引入 html 中。
不同的 webpack 版本需要安装不同的版本。
html-webpack-plugin 使用时，一个实例操作只能一个html，所以对于多页面项目，我们需要创造多个实例。
安装
Webpack 5
npm i --save-dev html-webpack-plugin
Webpack 4
npm i --save-dev html-webpack-plugin@4
该模型和 webpack 的版本强对应。
- webpack 4
- webpack-cli 3
- html-webpack-plugin 4
- html-loader 1
下面贴一下我其中一个项目的依赖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| "dependencies": {
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"abi-decoder": "^2.4.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"ethereumjs-tx": "^1.3.7",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.2",
"jquery": "^3.6.0",
"web3": "^1.3.6",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
|
使用
无模版
1
2
3
4
5
6
7
8
9
10
11
12
| const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
|
上面的会在 dist 中，创建一个 index.html 然后自动引入 index_bundle.js ，如果你生成了 .css 也会自动引入。
有模版
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}
|
dist/test.html 是由 src/assets/test.html 里的模版生成的。dist/index.html 是自生成 index.html
多页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPluginArray= [];
function getEntry() {
const entry = {};
glob.sync('./src/pages/*/*/index.js')
.forEach(function (filePath) {
var name = filePath.match(/\/pages\/(.+)\/index.js/);
name = name[1];
entry[name] = filePath;
htmlPluginArray.push(new HtmlWebpackPlugin({
filename: './' + name + '/index.html',
template: './src/pages/' + name + '/index.html',
}))
});
return entry;
};
plugins: [
htmlPluginArray
],
|
