欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

公司主營業(yè)務：成都網站設計、做網站、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現互聯網宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯推出鞍山免費做網站回饋大家。

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

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

文件目錄如下：

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

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用來監(jiān)聽webpack.config.js文件的狀態(tài)，只要發(fā)生改變，就重新執(zhí)行命令。

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

在這里，定義了兩個命令，一個是start，用于開發(fā)環(huán)境；一個是build，用于生產環(huán)境。--watch用來監(jiān)聽一個或者多個文件，--exec是nodemon用來執(zhí)行其它的命令。具體的配置請看：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', //只在發(fā)生錯誤時輸出
   // host:process.env.Host, 這里是undefined，參考的別人文章有這個
   // port:process.env.PORT, 這里是undefined，參考的別人文章有這個
   overlay:{ //當有編譯錯誤或者警告的時候顯示一個全屏overlay
    errors:true,
    warnings:true,
   }
  },
   plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NamedModulesPlugin(), // 更新組件時在控制臺輸出組件的路徑而不是數字ID，用在開發(fā)模式
   // 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就好啦。注意，前者是在開發(fā)環(huán)境下，是沒有輸出文件的（在內存），只有運行后者才會有輸出文件。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。

網站題目：webpack熱模塊替換（HMR）/熱更新的方法
網頁鏈接：http://chinadenli.net/article32/giecsc.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站維護、靜態(tài)網站、用戶體驗、網站營銷、響應式網站、品牌網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

成都網站建設