面题系列：多文件打包

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

题目描述

我们经常做一些独立小活动页面，又不想放在一堆仓库里面，也要跟主业务在一个仓库中，你有什么办法来解决这个需求吗？谈谈你解决方案。

考察点

node基础
对于webpack的配置与使用
webpack多页面打包

解题思路

我们经常构建的多为单页面应用(SPA)，但是还有一种应用叫多页面应用(MPA)，也就，每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这样类型的网站也叫多页网站。因为题目要求都是构建许多独立的页面又要存放到主业务仓库下，故我们可以采用webpack多页面打包的方法来解决问题。
首先我们要把想要独立的页面都通用建立一个文件夹存起来，每一个页面都要有一个html模板，和对应的页面逻辑脚本。然后我们会要在目录下找到这些模板和逻辑脚本，再通过HtmlWebpackPlugin插件，给这些模板和逻辑脚本一一对应，最后，进行打包就可以生成处理想要的结果了。

实现

安装插件

yarn add -D glob html-webpack-plugin clean-webpack-plugin

获取模板文件

webpack.config.js：

const entryFiles = glob.sync(path.resolve(__dirname, "./pages/*/*.html"))

对目标文件进行遍历来构建页面

webpack.config.js：

   const entry = {}
   const plugins = [new CleanWebpackPlugin()]
   
   entryFiles.forEach(_html => {
     const _name = _html.match(/pages\/(.*)\//)[1]
     entry[_name] = path.resolve(__dirname, `pages/${_name}/${_name}.js`)
     const _htmlPage = new HtmlWebpackPlugin({
       filename: _name + ".html",
       template: path.resolve(__dirname, `pages/${_name}/${_name}.html`),
       chunks: [_name],
       inject: true,
       minify: {
         html5: true,
         minifyCSS: true,
         minifyJS: true,
         removeComments: false,
         preserveLineBreaks: false
       }
     })
     plugins.push(_htmlPage)
   })
   
   module.exports = {
     entry,
     output: {
       path: path.resolve(__dirname, './dist'),
       filename: "js/[name].[chunkhash:8].js",
     },
     plugins,
     // ...
   }

这里因为把模板与脚本取名一直，以方便通过正则抓取逻辑脚本文件，接下来，要文件放到entry中，还要设置到html模板chunks中。

执行打包

package.json：

{
    "scripts": {
        "build": "webpack --mode production",
        "dev": "webpack-dev-server --mode development",
        "clean": "rimraf dist/*"
    }
}

yarn build

打包目录：

打包目录

打包结果：