webpack如何将dist文件夹构建在配置文件所在目录之外

webpack.prod.js中output.path的当前配置使用了__dirname变量，而Node.js中__dirname指向当前JS文件所在的目录，你的webpack.prod.js存放在/webpack目录下，所以path.join(__dirname, "/dist")拼接出的路径就是项目根目录/webpack/dist，导致dist文件夹生成在webpack目录内。

修改webpack.prod.js中的output.path配置，向上回退一级目录指向项目根目录即可：

const { merge } = require("webpack-merge");
const base = require("./webpack.base");
const path = require("path");

const Dotenv = require("dotenv-webpack");

module.exports = merge(base, {
  mode: "production",
  devtool: "inline-source-map", //For dev only
  output: {
    // 原配置 path: path.join(__dirname, "/dist"),
    // 修改为下方配置，../表示回退到webpack目录的上级即项目根目录
    path: path.join(__dirname, "../dist"),
    filename: "bundle.js",
  },
  plugins: [
    new Dotenv({ path: "./.env.production" }),
  ],
});

修改完成后重新执行npm run build，dist文件夹就会生成在项目根目录。

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