這是一篇關(guān)于webpack熱模塊替換的最簡單的配置（不需要react），也稱作熱更新。
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出鞍山免費做網(wǎng)站回饋大家。
模塊熱替換(HMR)的作用是，在應(yīng)用運行時，無需刷新頁面，便能替換、增加、刪除必要的模塊。 HMR 對于那些由單一狀態(tài)樹構(gòu)成的應(yīng)用非常有用。因為這些應(yīng)用的組件是 “dumb” (相對于 “smart”) 的，所以在組件的代碼更改后，組件的狀態(tài)依然能夠正確反映應(yīng)用的最新狀態(tài)。
webpack-dev-server內(nèi)置“l(fā)ive reload”，會自動刷新頁面。
文件目錄如下：
component.js中導(dǎo)入了a.js。index.js導(dǎo)入了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用來監(jiān)聽webpack.config.js文件的狀態(tài)，只要發(fā)生改變，就重新執(zhí)行命令。
關(guān)于”html-webpack-plugin”，在這里是可以省略的。具體的配置請看：https://www.npmjs.com/package/html-webpack-plugin 。
在這里，定義了兩個命令，一個是start，用于開發(fā)環(huán)境；一個是build，用于生產(chǎn)環(huán)境。--watch用來監(jiān)聽一個或者多個文件，--exec是nodemon用來執(zhí)行其它的命令。具體的配置請看：https://c9.io/remy/nodemon。
接下來是webpack.config.js了，既然package.json的scripts中定義了兩種命令，我們還是要在配置文件中實現(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ā)生錯誤時輸出
// host:process.env.Host, 這里是undefined，參考的別人文章有這個
// port:process.env.PORT, 這里是undefined，參考的別人文章有這個
overlay:{ //當有編譯錯誤或者警告的時候顯示一個全屏overlay
errors:true,
warnings:true,
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // 更新組件時在控制臺輸出組件的路徑而不是數(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，第一個參數(shù)是目標對象，如果目標對象中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。后來的源的屬性將類似地覆蓋早先的屬性。淺賦值，對于對象的復(fù)制使用=，即引用復(fù)制。
env參數(shù)通過cli傳入。
然后打開命令行到當前目錄，運行npm start或者npm run build就好啦。注意，前者是在開發(fā)環(huán)境下，是沒有輸出文件的（在內(nèi)存），只有運行后者才會有輸出文件。
demo的代碼在：https://github.com/yuwanlin/webpackHMR
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
