Webpack - 如果环境设置为生产环境，则包含一个脚本标签答案

【问题标题】：Wepback - Include a script tag if environment is set to productionWebpack - 如果环境设置为生产环境，则包含一个脚本标签
【发布时间】：2017-04-26 15:51:44
【问题描述】：

我的问题是这个

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'
    })
  ]
};

【问题讨论】：

了解这个脚本标签的用途以及为什么只在生产中需要它可能会有所帮助。

标签： webpack webpack-2

【解决方案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 文件，请查看原始帖子。

【讨论】：

【解决方案2】：

由于 Webpack 配置文件返回一个 JS 对象，您可以添加条件语句（根据您的环境或 webpack 变量）在返回/导出配置对象之前添加 further item to entry property。 p>

const myWebpackConfig = {
  entry: {
    bundle: './client/src/index.js',
    vendor: VENDOR_LIBS
  }
};

if( /* production env, it depends on your  */) {
  myWebpackConfig.entry.productionScript = './my-production-script.js',
}

// Return config object
module.exports = myWebpackConfig;

更灵活的方法包括exporting configuration function instead of an object 并在运行webpack 命令时通过--env 参数（如--env.production）指定自定义构建环境密钥：

//my-webpack-config.js

// Configuration stuff...

module.exports = function(env) {
  // env is the "--env" argument your specified with webpack command
  if(env.production) {
    // Add your production scripts
  }

  return myWebpackConfig;
}

然后，在运行 webpack 时：

webpack --config ./my-webpack-config.js --env.production

一些技巧可以更好地设置你的 webpack 配置：

Webpack-merge: 合并 webpack 配置对象
Webpack: building for production

【讨论】：