webpack+semanticui+react:未定义进程

我发现了很多关于Webpack错误的文章:

Uncaught ReferenceError: process is not defined

其中大多数建议将插件添加到 webpack.config.js :

plugins: [ 
  // ...
  new webpack.DefinePlugin({
      'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
      }
  }),
  // ...
]

然而,在我的情况下,这似乎不起作用。

为了让事情变得简单,我创造了 a repo 设置最小值 SemanticUI-React 使用Webpack,应该可以直接导航。我的配置 web包.config.js 从中得到了很大的启发 recent tutorial 这似乎有很多积极的评论。

要重现错误,只需克隆您机器上的repo(我使用 yarn ,但这应该适用于 npm 同样):

git clone https://github.com/sheljohn/minimal-semantic-react
cd minimal-semantic-react/
yarn install
yarn run serve

开张时间 localhost:3000 ,在开发人员控制台中可以看到错误。

据我所知,当响应加载时,它似乎使用变量来确定是设置了生产模式还是开发模式。 process.env.NODE_ENV ,在浏览器中未定义。

这可能与 target Webpack配置中的字段(设置为 web 默认情况下);但是由于react是从cdn加载的,所以在捆绑包之前,我想它不知道Webpack在做什么,这让我很困惑为什么在配置中添加插件会改变任何东西…

因此我的问题是: 是否可以通过将大型libs(react、reactdom、semantic)声明为外部的来使用语义用户界面react? 如果我把它们捆起来的话,一切都可以正常工作,但是这个捆最终会达到4MB左右,这相当大。

其他详细信息

Chrome中出现错误(OSX High Sierra,V66.0.3359.181,Dev控制台):

react.development.js:14 Uncaught ReferenceError: process is not defined
    at react.development.js:14
(anonymous) @ react.development.js:14

第14行代码摘录:

if (process.env.NODE_ENV !== "production") {

文件 web包.config.js

const path = require("path");
const webpack = require("webpack");
const publicFolder = path.resolve(__dirname, "public");

module.exports = {
  entry: "./src/index.jsx",
  target: "web",
  output: {
    path: publicFolder,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: publicFolder,
    port: 3000
  },
  externals: {
    'jquery': 'jQuery',
    'lodash': '_',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'semantic-ui-react': 'semantic-ui-react'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [ 
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

文件 .babelrc

{
  "presets": ["env", "react"]
}