webpack - Webpack - 如果环境设置为生产，则包含脚本标签

Question

我的问题是这个

https://github.com/petehunt/webpack-howto/issues/46

或者 - 如何让 webpack 根据我的环境将脚本标签包含到 HTML 中？如果我在生产中运行，我只希望包含某个脚本标记。

这是我当前的 webpack 文件的样子(我使用的是 webpack 2)。

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

const VENDOR_LIBS = [
  'axios', 'react', 'react-dom', 'react-router', 'react-apollo', 'prop-types'
];

module.exports = {
  entry: {
    bundle: './client/src/index.js',
    vendor: VENDOR_LIBS
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
      },
      {
        test: /\.(jpe?g|png|gif|svg|)$/,
        use: [
          {
            loader: 'url-loader',
            options: {limit: 40000}
          },
          'image-webpack-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: './client/src/index.html'
    })
  ]
};

Answer 1

Webpack 总是寻找 webpack.config.js文件，因此您必须进行以下配置以使其动态:

package.json

"dev": "webpack-dev-server --env=dev",
"prod": webpack -p --env=prod

webpack.config.js

module.exports = function(env) {
  return require(`./webpack.${env}.js`)
}

设置 --env=[env]标志是关键。

然后我有两个不同的 webpack 文件。一个叫 wepback.dev.js还有一个叫 webpack.prod.js .基于 package.json命令它将运行。然后我创建了两个不同的 index.html 文件 - index.prod.html和 index.dev.html .在其中我包含了每个环境所需的任何脚本。

我正在使用 webpack 2。在每个文件中我的 plugins区域看起来是这样的:

webpack.dev.js

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'manifest']
  }),
  new HtmlWebpackPlugin({
    template: './client/src/index.dev.html'
  })
]

正如你在这个例子中看到的，我的 webpack.dev.js将所有内容输出到我的 index.dev.html文件。除了使用 prod 之外，prod 版本将镜像相同.看全文 webpack文件看原帖。