如何设置 QA Mode Webpack/Webpack Serve？

Question

我有一个

webpack.common.js webpack.dev.js webpack.prod.js webpack.qa.js

以及我设置的 3 个环境中的每一个都设置了模式

const path = require("path");
const merge = require("webpack-merge");
const convert = require("koa-connect");
const proxy = require("http-proxy-middleware");
const historyApiFallback = require("koa2-connect-history-api-fallback");

const common = require("./webpack.common.js");

module.exports = merge(common, {
  // Provides process.env.NODE_ENV with value development.
  // Enables NamedChunksPlugin and NamedModulesPlugin.
  mode: "QA",
  devtool: "inline-source-map",
  // configure `webpack-serve` options here
  serve: {
    // The path, or array of paths, from which static content will be served.
    // Default: process.cwd()
    // see https://github.com/webpack-contrib/webpack-serve#options
    content: path.resolve(__dirname, "dist"),
    add: (app, middleware, options) => {
      // SPA are usually served through index.html so when the user refresh from another
      // location say /about, the server will fail to GET anything from /about. We use
      // HTML5 History API to change the requested location to the index we specified
      app.use(historyApiFallback());
      app.use(
        convert(
          // Although we are using HTML History API to redirect any sub-directory requests to index.html,
          // the server is still requesting resources like JavaScript in relative paths,
          // for example http://localhost:8080/users/main.js, therefore we need proxy to
          // redirect all non-html sub-directory requests back to base path too
          proxy(
            // if pathname matches RegEx and is GET
            (pathname, req) => pathname.match("/.*/") && req.method === "GET",
            {
              // options.target, required
              target: "http://localhost:8080",
              pathRewrite: {
                "^/.*/": "/" // rewrite back to base path
              }
            }
          )
        )
      );
    }
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
});

然后在我的代码中，我通过process.env.NODE_ENV 引用该模式，但是当我运行我的 QA 配置时，我得到了

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.mode should be one of these:
   "development" | "production" | "none"
   -> Enable production optimizations or development hints.

我怎样才能设置更多这些模式？

我正在使用 webpack 和 webpack serve

编辑

在我的 package.json 中

  "scripts": {
    "dev": "webpack-serve --config webpack.dev.js --open",
    "prod": "webpack -p --config webpack.prod.js",
    "qa": "cross-env NODE_ENV=QA webpack --config webpack.prod.js"
  },

然后在我的一个文件中

  console.log("process.env.NODE_ENV",process.env.NODE_ENV)

Answer 1

你不能设置！只有这 3 种模式可用。这些模式不需要用于不同的环境，它们只是 webpack 发现将某些默认值应用于基于 env 的构建的一种方式。如果您认为您的问答应该（实际上应该）表现得像 prod，那就把它当作 prod。

TL;TR：mode 与 env 无关，它们只是将某些默认值应用于您的构建的一种方式。

---

要访问前端代码上的process.env.NODE_ENV，您必须使用DefinePlugin：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});