如何使用webpack熱模組替換

這次帶給大家如何使用webpack熱模組替換，使用webpack熱模組替換的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

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

檔案目錄如下：

1. app

1. #a.js

2. #component.js

3. index.js

2. #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檔案的狀態，只要改變，就重新執行指令。

關於”html-webpack-plugin”，這裡是可以省略的。具體的設定請看：https://www.npmjs.com/package/html-webpack-plugin 。

在這裡，定義了兩個指令，一個是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就好啦。請注意，前者是在開發環境下，是沒有輸出檔案的（在記憶體），只有執行後者才會有輸出檔。

###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########如何使用js css實作打字效果################怎麼使用webpack原始碼loader機制#### #####

以上是如何使用webpack熱模組替換的詳細內容。更多資訊請關注PHP中文網其他相關文章！