Webpack 4 无法为 web 构建生产

Question

我很头疼，试图理解为什么这个生产版本不能在浏览器上运行。

所以基本上我有一个可以完美运行的开发配置，但是由于某种奇怪的原因，生产版本一直在控制台上显示Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.。

对此的任何帮助将不胜感激。

这是我的文件夹结构

package.json

"build": "webpack --config=config/webpack.config.js --env production --progress",
"start": "webpack-dev-server --config=config/webpack.config.js --env development --open"

还有webpack.config.js（我省略了开发人员配置，因为它工作正常）

... 
// Paths
getPaths = ({
  sourceDir = '../app', 
  distDir = '../dist', 
  staticDir = 'static', 
  images = 'images', 
  fonts = 'fonts', 
  scripts = 'scripts', 
  styles = 'styles'} = {}) => {
    const assets = { images, fonts, scripts, styles }
    return Object.keys(assets).reduce((obj, assetName) => {
      const assetPath = assets[assetName]
      obj[assetName] = !staticDir ? assetPath : `${staticDir}/${assetPath}`
      return obj
    },{
      app: path.join(__dirname, sourceDir),
      dist: path.join(__dirname, distDir),
      staticDir
    })
},
paths = getPaths(),
publicPath = '',


// Main module
commonConfig = merge([{
  context: paths.app,
  resolve: {
    unsafeCache: true,
    symlinks: false
  },
  entry: [`${paths.app}/scripts/index.jsx`, `${paths.app}/styles/styles.scss`],
  output: { path: paths.dist, publicPath },
  plugins: [
    new HtmlPlugin(),
  ]
  },
  load.Html(),
 })
]),

// Build
productionConfig = merge([
  {
    mode: 'production'
  },
  load.Scripts({
    include: paths.app,
    exclude: path.resolve(__dirname, 'node_modules'),
    options: { 
      configFile: path.resolve(__dirname, 'babel.config.js'),
    }
  }),

  load.ExtractCSS({
    include: paths.app,
    options: {
      filename: `${paths.styles}/[name].min.[contenthash:8].css`,
      chunkFilename: `${paths.styles}/[id].[contenthash:8].css`,
      publicPath: '../'   
    }
  })
]),

// Merge module
module.exports = env => {
  process.env.NODE_ENV = env
  return merge(commonConfig, env === 'production' ? productionConfig : developmentConfig
  )
}

最后是引用的模块webpack.modules.js

exports.Html = () => ({
  module: {
    rules: [
        {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  }
})



exports.MinifyCSS = ({ options }) => ({
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: options,
        canPrint: true // false for analyzer
      })
    ]
  }
})


exports.ExtractCSS = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [{
      test: /\.scss$/,
      include,
      exclude,
      use: [
        { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../../'  } },
        'css-loader', 
        { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')] }}, 
        'fast-sass-loader'
        ]
    }]
  },
  plugins: [ new MiniCssExtractPlugin(options) ]
})


exports.Scripts = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      include, 
      exclude,
      use: [{ loader: 'babel-loader', options }]
    }]
  }
})

当我在https://localhost/React/Transcript/dist/ 上打开网站时运行npm run build 后，我得到：

Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Answer 1

感谢评论区的大家帮我找到问题，原来我不得不从公共配置中删除module: { noParse: /\.min\.js/ }并添加new HtmlPlugin({ template: './index.html'})而不是new HtmlPlugin()