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