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。根据{{1}}命令，它将运行。然后我创建了两个不同的index.html文件 - package.json和index.prod.html。在这些内容中，我包含了每个环境所需的任何脚本。

我正在使用webpack 2.在每个文件中，index.dev.html区域看起来如此：

<强> webpack.dev.js

plugins

正如您在此示例中所看到的，我的plugins: [ new webpack.optimize.CommonsChunkPlugin({ names: ['vendor', 'manifest'] }), new HtmlWebpackPlugin({ template: './client/src/index.dev.html' }) ]会将所有内容输出到我的webpack.dev.js文件中。除了使用index.dev.html之外，prod版本将镜像相同。要查看完整的prod文件，请查看原始帖子。

Answer 2

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

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，并在运行--env命令时通过--env.production参数指定自定义构建环境键，如webpack：

//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

Wepback - 如果环境设置为生产，则包含脚本标记

2 个答案: