多页打包的原因
首先发出一个直击灵魂的拷问:为什么要多页面打包?
习惯了 React,Vue 全家桶的同学,可能觉得写代码不就是:npm run dev
npm run build
一把梭吗?
然而现实是骨感的,很多场景下,单页应用的开发模式并不适用。比如公司经常开发一些活动页:
https://www.demo.com/activity/activity1.html
https://www.demo.com/activity/activity2.html
https://www.demo.com/activity/activity3.html
上述三个页面是完全不相干的活动页,页面之间并没有共享的数据。然而每个页面都使用了 React 框架,并且三个页面都使用了通用的弹框组件。在这种场景下,就需要使用 webpack 多页面打包的方案了:
- 保留了传统单页应用的开发模式:使用 Vue,React 等前端框架(当然也可以使用 jQuery),支持模块化打包,你可以把每个页面看成是一个单独的单页应用
- 独立部署:每个页面相互独立,可以单独部署,解耦项目的复杂性,你甚至可以在不同的页面选择不同的技术栈
因此,我们可以把多页应用看成是乞丐版的前端微服务。
多页面打包的原理
首先我们约定: src/pages
目录下,每个文件夹为单独的一个页面。每个页面至少有两个文件配置:
app.js
: 页面的逻辑入口index.html
: 页面的 html 打包模板
src/pages
├── page1
│ ├── app.js
│ ├── index.html
│ ├── index.scss
└── page2
├── app.js
├── index.html
└── index.scss
前面我们说过:每个页面可以看成是个独立的单页应用。
单页应用怎么打包的?单页应用是通过配置 webpack 的的 entry
module.exports = {
entry: './src/main.js', // 项目的入口文件,webpack 会从 main.js 开始,把所有依赖的 js 都加载打包
output: {
path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
filename: 'build.js' // 打包后的文件名
}
};
因此,多页应用只需配置多个 entry 即可
module.exports = {
entry: {
'page1': './src/pages/page1/app.js', // 页面 1
'page2': './src/pages/page2/app.js', // 页面 2
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]/[name]-bundle.js', // filename 不能写死,只能通过[name]获取 bundle 的名字
}
}
同时,因为多页面的 index.html 模板各不相同,所以需要配置多个 HtmlWebpackPlugin。
注意:HtmlWebpackPlugin
一定要配chunks
,否则所有页面的 js 都会被注入到当前 html 里
module.exports = {
plugins: [
new HtmlWebpackPlugin(
{
template: './src/pages/page1/index.html',
chunks: ['page1'],
}
),
new HtmlWebpackPlugin(
{
template: './src/pages/page2/index.html',
chunks: ['page2'],
}
),
]
}
多页面打包的原理就是:配置多个entry
和多个HtmlWebpackPlugin
多页打包的细节
代码分割
- 把多个页面共用的第三方库(比如 React,Fastclick)单独打包出一个
vendor.js
- 把多个页面共用的逻辑代码和共用的全局 css(比如 css-reset,icon 字体图标)单独打包出
common.js
和common.css
- 把运行时代码单独提取出来
manifest.js
- 把每个页面自己的业务代码打包出
page1.js
和page1.css
前 3 项是每个页面都会引入的公共文件,第 4 项才是每个页面自己单独的文件。
实现方式也很简单,配置optimization
即可:
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
// 打包业务中公共代码
common: {
name: "common",
chunks: "initial",
minSize: 1,
priority: 0,
minChunks: 2, // 同时引用了 2 次才打包
},
// 打包第三方库的文件
vendor: {
name: "vendor",
test: /[\/]node_modules[\/]/,
chunks: "initial",
priority: 10,
minChunks: 2, // 同时引用了 2 次才打包
}
}
},
runtimeChunk: { name: 'manifest' } // 运行时代码
}
}
hash
最后打包出来的文件,我们希望带上 hash 值,这样可以充分利用浏览器缓存。webpack 中有hash
,chuckhash
,contenthash
:生产环境时,我们一般使用contenthash
,而开发环境其实可以不指定 hash。
// dev 开发环境
module.exports = {
output: {
filename: 'js/[name]/[name]-bundle.js',
chunkFilename: 'js/[name]/[name]-bundle.js',
},
}
// prod 生产环境
module.exports = {
output: {
filename: 'js/[name]/[name]-bundle.[contenthash:8].js',
chunkFilename: 'js/[name]/[name]-bundle.[contenthash:8].js',
},
}
mock 和 proxy
开发环境,通常需要 mock 数据,还需要代理 api 到服务器。我们可以通过devServer
配合mocker-api第三方库实现。
const apiMocker = require('mocker-api');
// dev 开发环境
module.exports = {
devServer: {
before(app) { // 本地 mock 数据
apiMocker(app, path.resolve(__dirname, '../mock/index.js'))
},
proxy: { // 代理接口
'/api': {
target: 'https://anata.me', // 后端联调地址
changeOrigin: true,
secure: false,
},
}
},
}
拆分 webpack 配置
为了通用配置,把 webpack 的配置文件分成 3 份。
build
├── webpack.base.js // 共用部分
├── webpack.dev.js // dev
└── webpack.prod.js // 生产
dev
和prod
配置的主要区别:
dev
配置devServer
,方便本地调试开发
prod
打包压缩文件,单独提取 css (dev 不提取是为了 css 热更新),生成静态资源清单manifest.json
关于为什么要生成一份manifest.json
,以及打包后的代码如何部署,我将会在下一篇文章详情介绍。
总结
webpack 的学习始终是前端绕不过去的一道坎。通过这次从零搭建多页面打包模板,也算是巩固了一下基础知识,离webpack 配置工程师又近了一步。
以上是 vue 官方推荐方案,一下是手动实现方案。
注意
- 弃用 npm run build & npm run dev & npm run dll
- 改成 box build & box dev & box dll
- link npm link 将 box 命令链接到全局
本章内容
- 使用
- 改造为脚手架
- 多页面配置
使用
box build # 不加参数则会编译所有页面,并清空 dist
box dev # 默认编译 index 页面
参数
# index2 是指定编译的页面。不会清空 dist
# report 开启打包分析
box build index2 --report
box dev index2 --report
改造为脚手架
分成三个命令,进行不同操作
- build
- dev
- dll
bin/box.js
#!/usr/bin/env node const chalk = require("chalk"); const program = require("commander"); const packageConfig = require("../package.json"); const { cleanArgs } = require("../lib"); const path = require("path"); const __name__ = `build,dev,dll`; let boxConf = {}; let lock = false; try { boxConf = require(path.join(process.cwd(), "box.config.js"))(); } catch (error) {} program .usage("<command> [options]") .version(packageConfig.version) .command("build [app-page]") .description(`构建开发环境`) .option("-r, --report", "打包分析报告") .option("-d, --dll", "合并差分包") .action(async (name, cmd) => { const options = cleanArgs(cmd); const args = Object.assign(options, { name }, boxConf); if (lock) return; lock = true; if (boxConf.pages) { Object.keys(boxConf.pages).forEach(page => { args.name = page; require("../build/build")(args); }); } else { require("../build/build")(args); } }); program .usage("<command> [options]") .version(packageConfig.version) .command("dev [app-page]") .description(`构建生产环境`) .option("-d, --dll", "合并差分包") .action(async (name, cmd) => { const options = cleanArgs(cmd); const args = Object.assign(options, { name }, boxConf); if (lock) return; lock = true; require("../build/dev")(args); }); program .usage("<command> [options]") .version(packageConfig.version) .command("dll [app-page]") .description(`编译差分包`) .action(async (name, cmd) => { const options = cleanArgs(cmd); const args = Object.assign(options, { name }, boxConf); if (lock) return; lock = true; require("../build/dll")(args); }); program.parse(process.argv).args && program.parse(process.argv).args[0]; program.commands.forEach(c => c.on("--help", () => console.log())); if (process.argv[2] && !__name__.includes(process.argv[2])) { console.log(); console.log(chalk.red(` 没有找到 ${process.argv[2]} 命令`)); console.log(); program.help(); } if (!process.argv[2]) { program.help(); }
多页面配置
box.config.js
module.exports = function(config) { return { entry: "src/main.js", // 默认入口 dist: "dist", // 默认打包目录 publicPath: "/", port: 8888, pages: { index: { entry: "src/main.js", template: "public/index.html", filename: "index.html" }, index2: { entry: "src/main.js", template: "public/index2.html", filename: "index2.html" } }, chainWebpack(config) {} }; };