webpack如何设置分包
时间: 2023-10-18 12:22:58 浏览: 38
Webpack的分包通常是通过使用code splitting来实现的。Code splitting 是一种将代码分割成多个文件的技术,这些文件在需要时被加载并执行。这可以减少初始加载时间和减少总体下载时间。
webpack支持多种方式来进行code splitting:
1. 入口起点:通过配置多个入口起点,webpack会为每个入口点生成一个独立的chunk
2. 动态导入:使用ES6的import()语法或webpack特有的require.ensure()方法来动态导入模块
3. 插件:使用webpack内置的插件或第三方插件来实现code splitting
下面以入口起点为例,介绍如何进行配置:
1. 在webpack.config.js中配置多个入口
```
module.exports = {
entry: {
main: './src/main.js',
vendor: './src/vendor.js'
},
// ...
}
```
2. 使用HtmlWebpackPlugin插件,将多个chunk注入到不同的HTML文件中
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
vendor: './src/vendor.js'
},
// ...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
template: './src/vendor.html',
filename: 'vendor.html',
chunks: ['vendor']
})
]
}
```
在这个例子中,我们使用HtmlWebpackPlugin插件为每个chunk生成一个HTML文件,其中main.js被注入到index.html中,vendor.js被注入到vendor.html中。
这样,我们就实现了简单的分包功能。当我们访问index.html时,只会加载main.js这个chunk,当我们访问vendor.html时,只会加载vendor.js这个chunk。同时,由于这两个chunk之间没有依赖关系,所以它们可以并行加载,从而提高性能。