![024dff98b85bf9ca9d6d8ee118738b93.png](https://i-blog.csdnimg.cn/blog_migrate/393670cc7a200e1b636ef92957595390.jpeg)
推荐阅读
WebPack基础入门(一):万物皆可webpack
WebPack基础入门(二):React项目配置
WebPack基础入门(三):配置eslint
WebPack基础入门(四):打包优化提升打包速度
WebPack基础入门(五):多环境配置
Webpack基础入门(六):多页面打包
作者:编程琐事
链接:https://juejin.im/post/6887483554180431886
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
正文
在此之前我们进行的打包都是单页面打包,我们日常使用的 react
,vue
都是单页面应用,所以之前的配置已经能够适应我们日常开发,但是在一些特殊的应用场景,也会对多页面进行打包。这章就介绍一下如何打包多页面应用
正文之前
在介绍如何打包多页面之前我们先修改一段配置,还记得优化那章的配置嘛?我们使用webpack.DllPlugin()
和webpack.DllReferencePlugin
对第三方包进行单独打包,我们的配置是这么写的
# webpack.dll.js
entry: {
vendors: ['react', 'react-dom', 'lodash']
},
如果我们还写了别的入口, 例如 vendors1, vendors2 那么打包就会生成vendors1 vendors2对应的文件,我们早webpack.common.js
里面就会重复写这些代码的引入。所以要修改成如下写法,
const fs = require('fs')
const plugins = [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html'),
}),
]
# 读取dll 目录下所有文件
const dllFiles = fs.readdirSync(path.resolve(__dirname, '../dll'))
# 遍历文件
# 如果是 .dll.js 结尾,使用 AddAssetHtmlPlugin 插件,
# 如果是 .manifest.json 结尾,使用 DllReferencePlugin 插件
dllFiles.forEach(file => {
if (/.dll.js/.test(file)) {
plugins.push(new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, '../dll', file),
}))
}
if (/.manifest.json/.test(file)) {
plugins.push(
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, '../dll', file),
})
)
}
})
# 使用 plugins
module.exports = {
...
plugins,
}
多页面打包
多页面打包原理和前面写的原理是一样的,多页面打包就是如果有多个,输出有多个。所以我们要把entry循环,然后使用HtmlWebpackPlugin分别引入不同的入口文件
- 创建 lius.js 入口文件
# /src/lius.js
import React from 'react';
import ReactDom from 'react-dom';
const App = (
<div>
这是第二个入口文件
</div>
)
ReactDom.render(<App />, document.getElementById('root'));
- 修改配置
# 创建 getPlugins 方法 把配置传入,在方法里面读取入口文件有哪些?
const getPlugins = configs => {
const plugins = [
new CleanWebpackPlugin(),
]
Object.keys(configs.entry).forEach(item => {
plugins.push(
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html'),
}),
)
})
// 其他配置
return plugins
}
const configs = {
# 写两个入口文件,分析得出在打包后的文件会有index.html 和 lius.html 分别引入对应的 js 文件
entry:{
index: path.resolve(__dirname, '../src/index.js'),
lius: path.resolve(__dirname, '../src/lius.js')
}
} # 之前的配置,删除掉 plugins 属性
configs.plugins = getPlugins(configs);
module.exports = configs;
查看打包生成的 dist 目录里面的 index.html。实际结果并不是我们分析得出的结论一样,修改配置
Object.keys(configs.entry).forEach(item => {
plugins.push(
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html'),
filename: `${item}.html`,
chunks: ['runtime','vendors', item]
}),
)
})
# filename 生成对应的 html 文件
# chunks 引入对应的文件 runtime vendors 是在optimization 配置的
结束
至此,已经将webpack 入门内容全部分享,这是我学习的内容,里面肯定有一些不对或者更好的解决方式,欢迎指出。最后奉献出 GitHub https://github.com/LiuSandy/web-learning/tree/main/webpack-demo