溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這是一篇關于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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
