這是一篇關于webpack熱模塊替換的最簡單的配置（不需要react），也稱作熱更新。
模塊熱替換(HMR)的作用是，在應用運行時，無需刷新頁面，便能替換、增加、刪除必要的模塊。 HMR 對于那些由單一狀態樹構成的應用非常有用。因為這些應用的組件是 “dumb” (相對于 “smart”) 的，所以在組件的代碼更改后，組件的狀態依然能夠正確反映應用的最新狀態。
webpack-dev-server內置“live reload”，會自動刷新頁面。
文件目錄如下：
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就好啦。注意，前者是在開發環境下，是沒有輸出文件的（在內存），只有運行后者才會有輸出文件。
demo的代碼在：https://github.com/yuwanlin/webpackHMR
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
