Wepback - 包括脚本标签，如果环境设置为生产

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之外，产品版本将镜像相同。要查看完整的webpack文件，请查看原始帖子。

Answer 2

由于返回一个JS对象的WebPack配置文件，您可以添加一个条件语句（根据您的环境或变量的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