Webpack配置优化：调整编译输出路径以生成指定单文件

你的配置里存在几处路径和入口设置的问题，直接导致了嵌套目录和空文件的情况。我们来一步步调整修复：

问题根源分析 #

• 路径解析错误：JS_DIR = path.resolve(__dirname, '/js')里的前置斜杠会让路径变成系统根目录下的/js，而非你项目根目录下的js文件夹，这会让webpack找不到正确的源文件。
• 冗余多入口：你设置了main和all两个入口，但all.js本身是空文件，所以编译后输出的all.js自然为空。而你的需求是把main/main.js编译成all.js，完全不需要多余的入口。
• 输出路径嵌套：output.filename设为'js/main/[name].js'，结合output.path是项目下的js目录，就会生成js/js/main/[name].js的嵌套结构，这不符合你的预期。

修改后的完整配置 #

const path = require('path');
// 修正路径：去掉前置斜杠，指向项目根目录下的js文件夹
const JS_DIR = path.resolve(__dirname, 'js');
// 输出目录直接设为项目下的js目录
const BUILD_DIR = path.resolve(__dirname, 'js');

module.exports = () => ({
  // 仅保留一个入口，指向main/main.js，命名为all（对应输出的all.js）
  entry: {
    all: JS_DIR + '/main/main.js',
  },
  output: {
    path: BUILD_DIR,
    // 直接输出为all.js，不再生成嵌套子目录
    filename: 'all.js'
  },
  devtool: false,
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [JS_DIR],
        exclude: /node_modules/,
        use: 'babel-loader',
      }
    ],
  }
});

关键修改说明 #

1. 修正源文件路径：将path.resolve(__dirname, '/js')改为path.resolve(__dirname, 'js')，确保webpack能正确定位到你项目中的js文件。
2. 简化入口配置：只保留all入口并指向main/main.js，让webpack将这个文件编译后直接输出为all.js。
3. 调整输出文件名：把output.filename从'js/main/[name].js'改为'all.js'，直接输出到目标目录，避免生成嵌套子结构。

现在执行npm run prod后，你会看到项目的js目录下直接生成编译完成的all.js，既没有嵌套子目录，也不会出现空文件的问题了。

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