快捷導(dǎo)航

webpack熱模塊替換（HMR）/熱更新的方法

更新時(shí)間：2018年04月05日 11:11:14 作者：睡在我下鋪的上鋪的胖子

模塊熱替換(HMR)的作用是，在應(yīng)用運(yùn)行時(shí)，無需刷新頁面，便能替換、增加、刪除必要的模塊，本篇文章主要介紹了webpack熱模塊替換（HMR）/熱更新的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

這是一篇關(guān)于webpack熱模塊替換的最簡單的配置（不需要react），也稱作熱更新。

模塊熱替換(HMR)的作用是，在應(yīng)用運(yùn)行時(shí)，無需刷新頁面，便能替換、增加、刪除必要的模塊。 HMR 對于那些由單一狀態(tài)樹構(gòu)成的應(yīng)用非常有用。因?yàn)檫@些應(yīng)用的組件是 “dumb” (相對于 “smart”) 的，所以在組件的代碼更改后，組件的狀態(tài)依然能夠正確反映應(yīng)用的最新狀態(tài)。

webpack-dev-server內(nèi)置“l(fā)ive reload”，會自動(dòng)刷新頁面。

文件目錄如下：

app
1. a.js
2. component.js
3. index.js
node_modules
package.json
webpack.config.js

component.js中導(dǎo)入了a.js。index.js導(dǎo)入了component.js。修改任意一個(gè)文件，都能達(dá)到熱更新功能。

最重要的是，在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"
 }
}

從依賴就可以看到，這真的是一個(gè)最簡單的配置了。其中nodemon用來監(jiān)聽webpack.config.js文件的狀態(tài)，只要發(fā)生改變，就重新執(zhí)行命令。

關(guān)于”html-webpack-plugin”，在這里是可以省略的。具體的配置請看：https://www.npmjs.com/package/html-webpack-plugin 。

在這里，定義了兩個(gè)命令，一個(gè)是start，用于開發(fā)環(huán)境；一個(gè)是build，用于生產(chǎn)環(huán)境。--watch用來監(jiān)聽一個(gè)或者多個(gè)文件，--exec是nodemon用來執(zhí)行其它的命令。具體的配置請看：https://c9.io/remy/nodemon。

接下來是webpack.config.js了，既然package.json的scripts中定義了兩種命令，我們還是要在配置文件中實(shí)現(xiàn)兩種情況（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', //只在發(fā)生錯(cuò)誤時(shí)輸出
   // host:process.env.Host, 這里是undefined，參考的別人文章有這個(gè)
   // port:process.env.PORT, 這里是undefined，參考的別人文章有這個(gè)
   overlay:{ //當(dāng)有編譯錯(cuò)誤或者警告的時(shí)候顯示一個(gè)全屏overlay
    errors:true,
    warnings:true,
   }
  },
   plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NamedModulesPlugin(), // 更新組件時(shí)在控制臺輸出組件的路徑而不是數(shù)字ID，用在開發(fā)模式
   // new webpack.HashedModuleIdsPlugin(), // 用在生產(chǎn)模式
  ],
 };
 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;
};

關(guān)于Object.assign，第一個(gè)參數(shù)是目標(biāo)對象，如果目標(biāo)對象中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。后來的源的屬性將類似地覆蓋早先的屬性。淺賦值，對于對象的復(fù)制使用=，即引用復(fù)制。

env參數(shù)通過cli傳入。

然后打開命令行到當(dāng)前目錄，運(yùn)行npm start或者npm run build就好啦。注意，前者是在開發(fā)環(huán)境下，是沒有輸出文件的（在內(nèi)存），只有運(yùn)行后者才會有輸出文件。

demo的代碼在：https://github.com/yuwanlin/webpackHMR

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: