如何在开发模式下正确配置 webpack-4 的 react答案

【问题标题】：How to properly configure react with webpack-4 in development mode如何在开发模式下正确配置 webpack-4 的 react
【发布时间】：2018-08-24 17:07:09
【问题描述】：

当我在 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 3.X 版本支持我的 webpack.config.js 中显示的 webpack 4.X 语法。

详情：

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

【问题讨论】：

您的配置似乎没问题。我认为我的webpack-demo 项目可以帮助您处理 webpack-4 和 react。尝试在本地构建/运行，让我知道它是否适合您。

标签： reactjs webpack babel-loader webpack-4

【解决方案1】：

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

当您导出函数时，将使用 2 个参数调用该函数：一个环境作为第一个参数（您可以忽略）和一个选项映射作为第二个参数。

您可以使用它来获取作为选项传递给 Webpack CLI 的 --mode，并使用它通过 DefinePlugin 定义 process.env.NODE_ENV。这可能是 babel 正在寻找的。p>

类似这样的：

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

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

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

【讨论】：

【解决方案2】：

您的代码中可能有这行（或类似的）：

process.env.NODE_ENV = 'development';

在构建时，Webpack 的 DefinePlugin 会将 process.env.NODE_ENV 替换为实际值（在您的情况下为 development），结果将是："development" = 'development';，这将引发错误。

【讨论】：