Wonderjar's Blog

webpack多入口文件打包

2018-04-08

#分业务模块打包 vs 多入口文件打包
正如我标题所说,我觉得首先要说清楚这两个概念。
分业务模块打包,是说在webpack的entry中, 定义多个来源

1
2
3
4
entry: {
main: './src/modules/login.js',
home: './src/modules/home.js'
},

这样会打出来多个js,比如main.bundle.js, home.bundle.js,然后index.html会同时引用这两个js
我觉得这样做的好处就是可以将代码按照业务模块划分,之后打包可以根绝需求只选择需要的业务模块进行打包
多入口文件打包,在我之前项目中,有这样的情况,从微信公众号下方按钮会打开我们的网页,但每个按钮打开的网页都只是部分网页且无法直接跳转到另一部分的网页,那么其实打开一个按钮就不需要加载一个包含所有页面的单页应用
这样的话,就可以编写多个入口文件,分开打包,仅仅打包各自所需的路由和页面,这样打出来会有多个index.html以及其中各自引用的bundle.js

#多入口文件打包
基本思路就是根据不同入口文件创建不同的webpack config,指定不同的entry, output, plugins等,然后多运行几遍webpack

1
2
3
4
5
6
7
8
9
10
11
12
entry: { main: path.resolve(__dirname, '../src/views/entry1.js') },
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'entry1_target' + '.[hash].bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'entry1',
filename: 'entry1_target.html',
template: path.resolve(__dirname, '../src/html/entry1.html')
})
]

#parallel-webpack
继续上边的基本思路,因为要多运行几次webpack,有这个叫parallel-webpack的工具,可以并行的执行多次打包,它其中用到的一个概念是variants,就根据不同variant编写你的不同打包策略即可