使用 webpack 构建简单项目,并自动生成脚本名称和与脚本关联的html

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const path = require('path');
const crypto = require('crypto');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const webpackConfig = {
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: crypto
.createHash('md5')
.update(new Date()
.getTime()
.toString(), 'utf8')
.digest('hex') + '.bundle.js'
},
plugins: [
new webpack.ProgressPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
]
}

module.exports = webpackConfig;

结果