hooyantsing's Blog

P25 code split

字数统计: 248阅读时长: 1 min
2020/12/02

尚硅谷2020最新版Webpack5实战教程

什么是code split

以前输出的js只有一个 built.js 文件。code split是将它们分割开来,分成多个代码文件。

编写配置文件:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const { resolve } = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
entry: {
// 多入口:有一个入口,最终输出一个bundle
// main test 取什么都可以,这是用于 [name]
index: './src/js/index.js',
// 删除入口文件内的引入test.js语句
test: './src/js/test.js'
},
output: {
// 取文件名[name]
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build'),
publicPath:'./'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
/*
可以将node_modules中代码单独打包一个chunk最终输出
自动分析多入口chunk中,有没有公共的文件。如果有会打包成单独一个chunk
*/
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production',
devServer: {
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000
}
};
CATALOG
  1. 1. 什么是code split