Index.html 使用 Webpack - 如何将条件代码放入其中？

Question

我正在使用 "HtmlWebpackPlugin" uisng webpack，我想将一些 google 分析代码放入其中，但当然我只希望将其放入生产服务器上。

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

这是我的 "webpack.common.js"（我有一个用于生产、质量检查和开发）。

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

module.exports = {
  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)
   })
  ]
};

我更新到

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]

babel 文件

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-object-rest-spread",
    "transform-class-properties",
    "emotion"
  ]
}

我有一个旧的 repo，它是我根据真实代码建模的

https://github.com/chobo2/webpack-serve-example

Answer 1

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

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

或者看看这个Whosebug

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

开发

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

产品

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

我希望这能解决问题

Index.html 使用 Webpack - 如何将条件代码放入其中？

Index.html with Webpack - How to put conditional code in it?

webpack

html-webpack-plugin