2023.17 webpack按照文件夹进行打包(二)

2023.17 webpack按照文件夹进行打包(二).png

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

接上节内容，上节写的程序还有每次只能实现一个模块的打包且不能动态的

目标：我们要实现一个可以自动遍历目录下的文件夹，并且每次可以自动帮我们把所有模块的包都打包下来。

实现思路：最终还是按照npm run build modelA这样的方式来执行的，不过是让程序帮我们实现多条可执行的命令，然后挨个执行即可。

什么文件是可执行shell脚本的呢？

写一个.sh的文件，里面的命令就是我们挨个执行的命令。从公司组件库打包发布中学来的（所以还是要多学多看别人得代码，然后找到一个点自己实现，然后就可以发现其中得乐趣就不会学起来很吃力）

要怎么生成脚本命令呢？

使用node提供的fs模块，将读取到的模块存储到数组里面，然后遍历数组就获取到了文件夹名，然后遍历文件夹名就获得到了模块名。

此时我们需要修改一下vue.config.js的配置信息，将入口和从出口文件都改成动态的即可

const { defineConfig } = require("@vue/cli-service")
let projectName = process.argv[3]
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./",
  outputDir: `./dist/${projectName}`,
  pages: {
    index: {
      entry: `./src/views/${projectName}/index.js`,
      //指定模板
      template: "./public/index.html",
      //动态设置模板id
      templateID: projectName,
    },
  },
})

编写生成脚本命令的文件，build.cjs

const fs = require("fs")
const path = require("path")

//基础路径配置
const BASE_URL = path.resolve(__dirname)
//获取文件夹也就是模块名
function getDirs(realPath) {
  return new Promise((resolve, reject) => {
    fs.readdir(realPath, (err, files) => {
      resolve(files)
    })
  })
}
//读取模块路径
const dirPath = path.join(BASE_URL, "../src/views")
const files = []
let shell = ""
getDirs(dirPath).then((res) => {
  const dirs = res
    //每次进去的时候先清空
    fs.writeFile(path.join(BASE_URL, "./release.sh"), "", "utf-8", () => {
        dirs.forEach((dir) => {
            shell += `npm run build ${dir} \n`
              fs.writeFile(
                path.join(BASE_URL, "./release.sh"),
                shell,
                "utf-8",
                (err) => {
                    if(err) return
                    console.log("文件写入成功")
                }
              )
        })
    })
})

在package.json中配置快速执行命令：

  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:entry": "node ./bin/build1.cjs && npm run build:bash",
    "build:bash": "sh ./bin/release.sh",
    "lint": "vue-cli-service lint"
  },

打包执行结果如图所示:

image.png

源码参考