webpack打包原理_Webpack基础入门(六)：多页面打包

推荐阅读

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分别引入不同的入口文件

1. 创建 lius.js 入口文件

# /src/lius.js
import React from 'react';
import ReactDom from 'react-dom';

const App = (
  <div>
    这是第二个入口文件
  </div>
)

ReactDom.render(<App />, document.getElementById('root'));

1. 修改配置

# 创建 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