webpack(7)-生產環境

development(開發環境) 和 production(生產環境) 這兩個環境下的構建目標存在着巨大差別。在開發環境中，咱們須要：強大的 source map 和一個有着 live reloading(實時從新加載) 或 hot module replacement(熱模塊替換) 能力的 localhost server。而生產環境目標則轉移至其餘方面，關注點在於壓縮 bundle、更輕量的 source map、資源優化等，經過這些優化方式改善加載時間。因爲要遵循邏輯分離，咱們一般建議爲每一個環境編寫彼此獨立的 webpack 配置。

雖然，以上咱們將生產環境和開發環境作了略微區分，可是，請注意，咱們仍是會遵循不重複原則(Don't repeat yourself - DRY)，保留一個 "common(通用)" 配置。爲了將這些配置合併在一塊兒，咱們將使用一個名爲 webpack-merge 的工具。此工具會引用 "common" 配置，所以咱們沒必要再在環境特定(environment-specific)的配置中編寫重複代碼。

npm scripts

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
//讓  script 中  使用 development(開發環境) 配置文件
    "start": "webpack-dev-server --open --config webpack.dev.js",
// script 使用 production(生產環境) 配置文件
    "build": "webpack --config webpack.prod.js"
  }
}npm startwebpack-dev-servernpm run build

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
　　// 默認運行webpack.config.js
    "start": "webpack-dev-server --open",
    "build": "webpack"
}

//webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    //清理dist文件夾，保證裏面只有最新生成的文件
    new CleanWebpackPlugin(['dist']),
    //生成它本身的 index.html 文件，它會用新生成的 index.html 文件，替換咱們的原有文件
    new HtmlWebpackPlugin({
      title: 'Production'
    })
  ]
}

//webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
//webpack-merge 工具提供了各類 merge(合併) 高級功能
module.exports = merge(common, {
  mode: 'development',
  //可以將錯誤定位到源碼，而不是壓縮後到代碼
  //用於develipment環境
  //強大的 source map
  devtool: 'inline-source-map',
  //提供了一個簡單的 web server，而且具備 live reloading(實時從新加載) 功能
  //改任何源文件並保存它們，web server 將在編譯代碼後自動從新加載
  //瀏覽器自動刷新
  devServer: {
    contentBase: './dist'
  }
});

//webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
module.exports = merge(common, {
//webpack v4+ 會默認壓縮你的代碼
  mode: 'production',

 //在生產環境中啓用 source map，由於它們對 debug(調試源碼) 和運行 benchmark tests(基準測試) 頗有幫助

 //避免在生產中使用 inline-*** 和 eval-***，由於它們會增長 bundle 體積大小，並下降總體性能。  

 //與開發環境用的不同

　devtool: 'source-map'

});

 指定mode

許多 library 經過與 process.env.NODE_ENV 環境變量關聯，以決定 library 中應該引用哪些內容。例如，當不處於生產環境中時，某些 library 爲了使調試變得容易，可能會添加額外的 log(日誌記錄) 和 test(測試) 功能。而且，在使用 process.env.NODE_ENV === 'production' 時，一些 library 可能針對具體用戶的環境，刪除或添加一些重要代碼，以進行代碼執行方面的優化。從 webpack v4 開始, 指定 mode 會自動地配置 DefinePlugin：

 

技術上講，NODE_ENV 是一個由 Node.js 暴露給執行腳本的系統環境變量。一般用於決定在開發環境與生產環境(dev-vs-prod)下，server tools(服務期工具)、build scripts(構建腳本) 和 client-side libraries(客戶端庫) 的行爲。然而，與預期相反，沒法在構建腳本 webpack.config.js 中，將 process.env.NODE_ENV 設置爲 "production"，請查看 #2537。所以，在 webpack 配置文件中，process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js' 這樣的條件語句，沒法按照預期運行

 

任何位於 /src 的本地代碼均可以關聯到 process.env.NODE_ENV 環境變量

 import { cube } from './math.js';
 if (process.env.NODE_ENV !== 'production') { console.log('Looks like we are in development mode!'); } function component() {
    var element = document.createElement('pre');

    element.innerHTML = [
      'Hello webpack!',
      '5 cubed is equal to ' + cube(5)
    ].join('\n\n');

    return element;
  }

  document.body.appendChild(component());