初始化

1
2
3
4
yarn init -y

//webpack.json name 不能为中文
yarn add webpack webpack-cli -D
1
2
3
4
5
6
7
8
9
10
11
{
"name": "webpack-peizhi",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
}
}

配置多页面打包

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
27
28
29
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
mode: "development",
//多入口
entry:{
home:'./src/index.js',
other:'./src/other.js'
},
output: {
// [name] home,other 实现输出不同文件
filename: "[name].js",
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'home.html',
//代码块:实现引入不同的js
chunks: ['home']
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'other.html',
chunks: ['other','home']
})
]
}