Question

我正在尝试为我的React项目的Webpack捆绑包设置生产配置。我过去使用的配置似乎不适用于该项目，我不确定为什么。

这是我的webpack.common.js

const path = require('path')

module.exports = {
  entry: path.join(__dirname, '../index.js'),
  output: {
    path: path.join(__dirname, '../../public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$|\.scss$|\.sass$/,
        use: [
          {loader: 'style-loader'},
          {loader: 'css-loader'},
          {loader: 'sass-loader'}
        ]
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {loader: 'babel-loader'}
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
}

这是我的webpack.prod.js

const webpack = require('webpack')
const merge = require('webpack-merge')

const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],
  externals: {
    // Use external version of React
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter',
    'redux': 'Redux'
  },
  devtool: false
})

我得到的错误仅仅是

Uncaught ReferenceError: React is not defined

在线===>（最小捆绑）

function(t, e) {
  t.exports = React
 }

我的index.html包含：

  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.min.js"></script>

任何提示将不胜感激！

蒂姆

React Webpack外部未在生产模式下加载React

0 个答案: