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. 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 }]
    }]
  }
})

運行 npm 后，當我在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

感謝評論部分的每個人幫助我找到問題，事實證明我必須從 common config 中刪除module: { noParse: /\.min\.js/ }並添加new HtmlPlugin({ template: './index.html'})而不是new HtmlPlugin()