Webpack如何配置以同时编译js和ui两个目录下的所有脚本文件？

• my_app
  • src
    • js
      • dir_1_with_js
      • ...
      • dir_n_with_js
      • package.json
      • webpack.config.js
      • script_1.js
      • ...
      • script_n.js
    • ui
      • ui_dir_1_with_js
      • ...
      • ui_dir_n_with_js
      • ui_script_1.js
      • ...
      • ui_script_n.js

该需求完全可以实现，仅需对现有webpack.config.js做少量配置调整即可，不会影响原有业务代码的正常编译逻辑，可满足渐进式重构的需求。

• 1. 入口配置调整
     需要将ui目录下的脚本也纳入webpack的入口范围。如果项目使用多入口配置，可手动添加ui目录的入口文件；如果需要自动匹配两个目录下的所有js文件作为入口，可借助glob工具遍历获取所有入口文件。
• 2. Loader包含范围调整
     原有配置中处理js的loader（如babel-loader）的include字段通常仅包含当前js目录，需要将ui目录也加入包含范围，确保ui目录下的js代码会被对应的loader处理。如果项目中还有处理css、图片等静态资源的loader，也需要同步把ui目录加入对应loader的include范围。
• 3. 路径别名配置（可选）
     可以配置resolve.alias别名简化两个目录下模块的互相引用，避免写过长的相对路径。
• 4. 输出配置调整（可选）
     如果需要区分原有js代码和新ui代码的编译产物，可在output配置中通过占位符调整产物的命名和输出路径。

const path = require('path');
// 如需自动遍历入口可安装glob依赖：npm i glob -D
const glob = require('glob');

// 自动获取两个目录下的所有js入口文件，排除不需要编译的文件
const getEntries = () => {
  const jsEntries = glob.sync(path.resolve(__dirname, './**/*.js'), {
    ignore: ['**/node_modules/**', '**/webpack.config.js']
  });
  const uiEntries = glob.sync(path.resolve(__dirname, '../ui/**/*.js'));
  const entries = {};
  [...jsEntries, ...uiEntries].forEach(file => {
    // 可根据自身需求调整入口命名规则，避免重名
    const relativePath = path.relative(path.resolve(__dirname, '../'), file);
    const entryName = relativePath.replace(/\.js$/, '');
    entries[entryName] = file;
  });
  return entries;
};

module.exports = {
  entry: getEntries(),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // 新增ui目录到loader的包含范围
        include: [
          path.resolve(__dirname),
          path.resolve(__dirname, '../ui')
        ],
        use: 'babel-loader'
      }
      // 其他原有loader规则保持不变，静态资源相关loader同步添加ui目录到include即可
    ]
  },
  resolve: {
    alias: {
      // 配置别名简化导入路径
      '@js': path.resolve(__dirname),
      '@ui': path.resolve(__dirname, '../ui')
    },
    extensions: ['.js']
  }
  // 其他原有配置（plugins、devServer等）保持不变即可
};

注意：如果不需要自动遍历所有文件作为入口，也可以手动指定入口：

entry: {
  // 原有js目录入口
  main: './script_1.js',
  // 新增ui目录入口
  uiMain: '../ui/ui_script_1.js'
}

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