如何正确配置与webpack-4在开发模式下的反应

Question

当我在NodeJs React应用程序中使用webpack和babel时，我得到了一个自动生成的错误代码：

Uncaught ReferenceError: Invalid left-hand side in assignment

下面是由babel/webpack自动生成的代码中的冒犯行：

"development" = 'development'; // bundle.js line 17933

如果我从自动生成的代码中手动删除上面的一行，那么错误就会消失。但由于明显的原因，这不是一个好的解决办法。

我使用webpack 4，如package.json的摘录所示

"babel-loader": "^7.1.4",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12"

这是我的webpack.config.js

module.exports = {
    entry: './source/main.js',
    output: {
        path: __dirname,
        filename: 'public/javascripts/bundle.js'
    },
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['react', 'stage-0']
                    }
                }
            }
        ]
    }
};

我构建了这样的bundle.js：

node_modules/.bin/webpack --mode development

如果保持不变，但使用webpack 3.11.0并卸载webpack-cli并构建bundle.js，则错误将消失，如下所示：

node_modules/.bin/webpack

webpack.config.js__.：最新的webpack 3.X版本支持webpack 4.X语法，如我的所示

详细信息：

$ node --version
v9.8.0
$ npm --version
5.7.1

Answer 1

我要做的是从webpack.config.js模块导出一个函数。

导出函数时，将使用两个参数调用该函数:一个环境作为第一个参数(可以忽略它)，另一个选项映射作为第二个参数。

您可以使用它将--mode作为选项传递给Webpack CLI，并使用它通过DefinePlugin定义process.env.NODE_ENV。这可能就是巴贝尔要找的。

就像这样：

const { DefinePlugin } = require('webpack');
...

module.exports = (env, options) => {
    ...

    plugins: [
        new DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(options.mode)
        })
    ]
};

Answer 2

您的代码中可能有这一行(或类似的)代码：

process.env.NODE_ENV = 'development';

在构建时，Webpack的DefinePlugin将用实际值代替process.env.NODE_ENV (在您的情况下是development)，结果是："development" = 'development';将抛出一个错误。