如何配置单份Webpack，编译多个Vue应用为独立JS包

需求背景 #

需要通过顶层Webpack配置，一次性编译front-end目录下的多个独立Vue子应用（如vue-app-1、vue-app-2），无需为每个子应用单独配置Webpack/Babel，编译产物统一输出到项目根目录的static文件夹，供Django模板调用。

调整后的目录结构 #

.
├── db.sqlite3
├── front-end/
│   ├── vue-app-1/
│   │   ├── App.vue
│   │   ├── assets
│   │   ├── components
│   │   └── main.js
│   └── vue-app-2/
│       ├── App.vue
│       ├── assets
│       ├── components
│       └── main.js
├── manage.py
├── node_modules/
├── package-lock.json
├── package.json
├── django_project/
├── django_app/
├── static/
└── webpack.config.js

完整Webpack配置 #

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const fs = require('fs');

// 自动扫描front-end下的所有子应用入口
const generateEntries = () => {
  const entries = {};
  const frontEndPath = path.resolve(__dirname, './front-end');
  
  // 获取front-end下的所有子目录
  const appDirectories = fs.readdirSync(frontEndPath, { withFileTypes: true })
    .filter(dirent => dirent.isDirectory())
    .map(dirent => dirent.name);

  appDirectories.forEach(appName => {
    entries[appName] = path.join(frontEndPath, appName, 'main.js');
  });

  return entries;
};

module.exports = {
  entry: generateEntries(), // 动态生成多应用入口
  output: {
    filename: '[name]-bundle.js', // 按应用名生成唯一打包文件
    path: path.resolve(__dirname, './static'), // 输出到Django static目录
    clean: true, // 构建前清空static目录（可选，按需启用）
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', { targets: "defaults" }]]
        }
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]' // 资源文件添加哈希后缀，避免缓存冲突
            }
          },
          'image-webpack-loader'
        ]
      }
    ]
  },
  plugins: [new VueLoaderPlugin()],
  resolve: {
    extensions: ['.vue', '.js'],
    alias: { 'vue$': 'vue/dist/vue.esm.js' } // 启用Vue完整版编译（按需）
  }
};

核心改动说明 #

• 动态入口生成：通过Node.js的fs模块自动扫描front-end下的子目录，为每个子应用生成入口配置，新增子应用时无需修改Webpack配置。
• 区分打包产物：使用[name]变量将子应用名称作为打包文件名前缀，生成vue-app-1-bundle.js这类文件，方便Django模板精准引入。
• 资源缓存优化：图片资源添加哈希后缀，避免浏览器缓存旧资源。
• 自动清理旧产物：output.clean配置可在每次构建前清空static目录，避免残留无用文件（可根据需求关闭）。

使用步骤 #

1. 确认依赖安装：确保已安装所需依赖，若未安装执行：

   npm install vue vue-loader vue-style-loader css-loader babel-loader @babel/core @babel/preset-env file-loader image-webpack-loader webpack webpack-cli --save-dev
   

2. 配置构建命令：在package.json中添加：

   {
     "scripts": {
       "build": "webpack --mode production",
       "watch": "webpack --mode development --watch"
     }
   }
   

3. 执行构建：
   • 生产环境构建：npm run build，产物输出到static目录。
   • 开发环境监听：npm run watch，文件变化时自动重新打包。
4. Django模板引入：在模板中通过静态文件标签引入对应应用，例如：

   <script src="{% static 'vue-app-1-bundle.js' %}"></script>
   

内容的提问来源于stack exchange，提问作者Nonchalant