Webpack 带网页包的Index.html-如何将条件代码放入其中？

我正在使用“HtmlWebpackPlugin”的webpack，我想在其中添加一些google分析代码，但当然，我只希望在生产服务器上添加这些代码

有没有简单的方法可以做到这一点

这是我的“webpack.common.js”（我有一个用于生产、qa和开发）

我更新到

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = (env, argv) => {
  const ga = argv.mode === 'production' ? './index-google.html' : 'index.html';
  return {
    entry: ['@babel/polyfill', './src/index.js'],
    output: {
      // filename and path are required
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/'
    },
    module: {
      rules: [
        {
          // JSX and JS are all .js
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'file-loader',
              options: {}
            }
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {}
            }
          ]
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        template: './src/index.html'
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      })
    ]
  };
};

但当我建造时，我得到了

ERROR in ./src/index.js 35:4
Module parse failed: Unexpected token (35:4)
You may need an appropriate loader to handle this file type.
| ReactDOM.render(
| 
>     <Provider routingStore={routingStore} domainStores={DomainStores} uiStores={uiStores}>
|       <Router history={history}>
|         <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
 @ multi ./src main[0]

我有一个旧的回购协议，我模仿了我的真实代码

---

您可以检查它是否是生产版本，从而提供您喜欢的服务

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: argv.mode === 'production' ? 'src/index-google.html' : 'src/index.html'
})

或者看看这个

编辑
我看到您的webpack项目分为dev、prod、common和config。 从配置中删除HtmlWebpackPlugin，并使用适当的html文件插入到开发和产品中

dev

new HtmlWebpackPlugin({
  template: "./src/index.html"
})

new HtmlWebpackPlugin({
  filename: index.html,
  template: "./src/index-google.html"
})

prod

new HtmlWebpackPlugin({
  template: "./src/index.html"
})

new HtmlWebpackPlugin({
  filename: index.html,
  template: "./src/index-google.html"
})

---

我希望这能解决问题

我正在尝试你的方法，但它似乎没有得到我的生产变量。新的HtmlWebpackPlugin（{filename:'index.html'，模板：process.env.NODE_env=='production'？“/src/index google.html”：“/src/index.html”}）、新的webpack.IgnorePlugin（/^\.\/locale$/，/moment$/）、新的webpack.DefinePlugin（{'process.env.NODE_env'：JSON.stringify（process.env.NODE_env）}）@chobo2我准备了一个工作，如果你运行dev，它将显示警报（'dev'），运行prod将生成一个模板索引-google.html和警报（'prod'）。嘿，我在更新我的网页包时更新了我的OP，使其看起来像你的，但现在我在尝试构建.show babel文件时出错。或者你在github上有代码？嘿，我添加了我的babel文件。