webpack - 如何在当前 webpack 配置目录之外构建 dist 文件夹答案

【问题标题】：webpack - how to build dist folder outside current webpack config directorywebpack - 如何在当前 webpack 配置目录之外构建 dist 文件夹
【发布时间】：2021-11-25 17:51:07
【问题描述】：

这是我当前的项目目录

src
  -App.jsx
  -...
webpack
  -webpack.base.js
  -webpack.prod.js

package.json

  "scripts": {
    "build": "webpack --config ./webpack/webpack.prod.js",
  }

当我运行npm run build 时，dist 文件夹会在我的 webpack 目录中创建。

src
  -App.jsx
  -...
webpack
  -dist
  -webpack.base.js
  -webpack.prod.js

我想要的是

dist
src
  -App.jsx
  -...
webpack
  -webpack.base.js
  -webpack.prod.js

这是我的 webpack 配置

webpack.base.js

const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  resolve: {
    extensions: ["*", ".js", ".jsx"],
    fallback: {...},
  },
  module: {
    rules: [...],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
      favicon: "public/favicon.ico",
    }),
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    new webpack.ProvidePlugin({
      process: "process/browser",
    }),
  ],
};

webpack.prod.js

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"),
    filename: "bundle.js",
  },
  plugins: [
    new Dotenv({ path: "./.env.production" }),
  ],
});

【问题讨论】：

path: path.join(__dirname, "../dist")

标签： javascript webpack webpack-5

【解决方案1】：

您可以为output.path 配置指定绝对路径。

webpack/webpack.prod.js:

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

module.exports = merge(base, {
  mode: "production",
  devtool: "inline-source-map",
  output: {
    path: path.join(__dirname, "../dist"),
    filename: "bundle.js",
  },
});

在项目的根路径下运行npm run build。

输出：

⚡  tree -L 2 -I 'node_modules'               
.
├── dist
│   └── bundle.js
├── package-lock.json
├── package.json
├── src
│   └── index.jsx
└── webpack
    ├── webpack.base.js
    └── webpack.prod.js

【讨论】：

我猜他们没看懂我的一行评论。