2023.16 webpack按照文件夹进行打包

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。

前言

最近老大要求研究一下将html、css、js按照文件夹的方式进行打包，目的是为了将我们新的流程进行统一，后面开发的流程可以使用流程中心的头部和审批节点，进行代码复用，开发只需要关注流程主要部分开发即可。

我们的项目是vue2的项目，使用的是vue-cli进行环境搭建的，vue-cli的配置文件vue.config.js和webpack的配置很像，具体可以参考

实现思路

首先，我想到的是用插件的方式进行打包的，在webpack的编译阶段分析模块依赖，然后按照模块路径分析出哪些是入口文件，哪些是样式和js文件，然后模仿webpack的打包方式IIFE最后将所有文件都暴露出一个入口文件。结果，因为我太菜了，并且不太想写插件，然后就想试下用vue-vli默认的打包方式打包出来是什么样的，用现有的配置能不能实现

我的项目目录结构.png

翻了一下webpack的文档，入口就是指定的一个文件路径，通常我们的单页应用指向的都是src/main.js，那么我们按照一定的目录组织结构是不是可以有规律的指定入口文件的路径呢？

答案是可以的，我们可以读取到目录结构src\views\modelA、src\views\modelB，每次将目录下的入口文件都有规律的命名，就可以找到对应目录下的入口文件

 pages: {
    index: {
      entry: "./src/views/modelA/index.js",
      //指定模板
      template: "./public/index.html",
      //动态设置模板id
      templateID: "modelA",
    },
}

问题是我们只能配置一个出口文件的文件夹，那么如果想要同时打包出所有的子项目该怎么办呢？

我的解决方法是，通过执行命令时的参数控制来实现。

例如：我们之前打包使用的命令是npm run build，现在我们可以通过执行命令时给其传参来获取模块名，然后根据获取到的模块名来实现打包文件动态化

我们使用同一份模板文件，使用htmlWebpackPlugin的插值语法来实现动态修改应用的动态挂载id

vue.config.js配置参考

const { defineConfig } = require("@vue/cli-service")
const path = require("path")
let projectName = process.argv[3]

//dev环境配置
// module.exports = defineConfig({
//   transpileDependencies: true,
//   publicPath: "./",
//   outputDir: "./dist/module",
//   pages: {
//     index: {
//       entry: "./src/views/modelA/index.js",
//       //指定模板
//       template: "./public/index.html",
//       //动态设置模板id
//       templateID: "modelA",
//     },
//     second: {
//       entry: "./src/views/modelB/index.js",
//       //指定模板
//       template: "./public/index.html",
//       //动态设置模板id
//       templateID: "modelB",
//     },
//   },
// })

function getEntry() {
  let entry = {}
  entry = {
    index: {
      //指定入口文件
      entry: "./src/views/" + projectName + "/index.js",
      //指定模板
      template: "./public/index.html",
      //动态设置模板id
      templateID: projectName,
    },
  }

  return entry
}

let pages = getEntry()
console.log(path.resolve(__dirname, "./src/views/" + projectName + "/index.js"))
console.log(pages)

//vue.config.js配置，生产环境打包配置
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./",
  outputDir: "./dist/" + projectName,
  pages: pages,
})

源码地址

遗留问题

但是上述配置，只能实现每次打包一个模块的包，想要一键实现所有模块的打包还需要自己写个脚本命令，下节实现之后，再和大家分享。