這次帶給大家webpack如何實現熱模組替換,webpack實現熱模組替換的注意事項有哪些,下面就是實戰案例,一起來看一下。
模組熱替換(HMR)的作用是,在應用運行時,無需刷新頁面,便能替換、增加、刪除必要的模組。 HMR 對於那些由單一狀態樹構成的應用非常有用。因為這些應用的組件是 “dumb” (相對於 “smart”) 的,所以在組件的程式碼變更後,組件的狀態依然能夠正確反映應用的最新狀態。
webpack-dev-server內建“live reload”,會自動重新整理頁面。
檔案目錄如下:
app
#a.js
#component.js
index.js
#node_modules
#package.json
#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中文網其它相關文章! 推薦閱讀:
以上是webpack如何實現熱模組替換的詳細內容。更多資訊請關注PHP中文網其他相關文章!