Webpack/Webpack如何设置QA模式？

Question

我有一个

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

三个环境中的每一个都设置了一个模式

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发球

编辑

在我的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吧。

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

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

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