這是一篇關於webpack熱模組替換的最簡單的配置（不需要react），也稱作熱更新。

模組熱替換(HMR)的作用是，在應用執行時，無需重新整理頁面，便能替換、增加、刪除必要的模組。 HMR
對於那些由單一狀態樹構成的應用非常有用。因為這些應用的元件是 “dumb” (相對於 “smart”)
的，所以在元件的程式碼更改後，元件的狀態依然能夠正確反映應用的最新狀態。

webpack-dev-server內建“live reload”，會自動重新整理頁面。

檔案目錄如下：

• app
  
  • a.js
  • component.js
  • index.js
• node_modules
• package.json
• webpack.config.js

component.js中匯入了a.js。index.js匯入了component.js。修改任意一個檔案，都能達到熱更新功能。

最重要的是，在index.js中，有這樣一段程式碼：（完成熱更新必須需要）

if(module.hot){
    module.hot.accept(moduleId, callback);
}

下面是package.json配置：

{
  "name": "webpack-hmr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts
 
": {
    "start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
    "build": "webpack --env production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.28.0",
    "nodemon": "^1.11.0",
    "webpack": "^2.2.1"
 
,
    "webpack-dev-server": "^2.4.1"
  }
}

從依賴就可以看到，這真的是一個最簡單的配置了。其中nodemon用來監聽webpack.config.js檔案的狀態，只要發生改變，就重新執行命令。

在這裡，定義了兩個命令，一個是start，用於開發環境；一個是build，用於生產環境。--watch用來監聽一個或者多個檔案，--exec是nodemon用來執行其它的命令。具體的配置請看：https://c9.io/remy/nodemon。

接下來是webpack.config.js了，既然package.json的scripts中定義了兩種命令，我們還是要在配置檔案中實現兩種情況（development和production，你也可以修改配置其中一種）。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};

const commonConfig={
 entry: {
    app: PATHS.app + '/index.js',
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  watch: true,
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
  ],
}

function developmentConfig(){
  const config ={
    devServer:{
      historyApiFallback:true, //404s fallback to ./index.html
      // hotOnly:true, 使用hotOnly和hot都可以
      hot: true,
      stats:'errors-only', //只在發生錯誤時輸出
      // host:process.env.Host, 這裡是undefined，參考的別人文章有這個
      // port:process.env.PORT, 這裡是undefined，參考的別人文章有這個
      overlay:{ //當有編譯錯誤或者警告的時候顯示一個全屏overlay
        errors:true,
        warnings:true,
      }
    },
     plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(), // 更新元件時在控制檯輸出元件的路徑而不是數字ID，用在開發模式
      // new webpack.HashedModuleIdsPlugin(), // 用在生產模式
    ],
  };
  return Object.assign( 
    {},
    commonConfig,
    config,
    {
      plugins: commonConfig.plugins.concat(config.plugins),
    }
  );
}

module.exports = function(env){
  console.log("env",env);
  if(env=='development'){
    return developmentConfig();
  }
  return commonConfig;
};

關於Object.assign，第一個引數是目標物件，如果目標物件中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。後來的源的屬性將類似地覆蓋早先的屬性。淺賦值，對於物件的複製使用=，即引用複製。

env引數通過cli傳入。

然後開啟命令列到當前目錄，執行npm start或者npm run build就好啦。注意，前者是在開發環境下，是沒有輸出檔案的（在記憶體），只有執行後者才會有輸出檔案。

參考