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

雖然，以上我們將生產環境和開發環境做了略微區分，但是，請註意，我們還是會遵循不重復原則(Don‘t repeat yourself - DRY)

npm scripts

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

{
  "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‘,

　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());

webpack(7)-生產環境