Webpack 2: 生產力工具, 模塊熱替換(HMR)的幾種方式

changfeng1050 發布于2019-08-20 16:11 / 2667人閱讀

摘要：更新已經到了這里添加更新說明并說明結合使用的簡要步驟參考資料環境在中添加中的設置的要設置為要在你的應用程序入口之前添加如下在有完整的配置入口文件要這樣導

2018-01-10 更新

Webpacket 已經到3了, 這里添加更新說明,并說明結合babel-loader使用的簡要步驟

參考資料

https://doc.webpack-china.org...

https://github.com/gaearon/re...

https://segmentfault.com/p/12...

#0. 環境

node: v9.0.0
webpack: ^3.10.0 
webpack-dev-server: ^2.10.1
react-hot-loader": ^3.1.3
babel-core: ^6.26.0
babel-loader: ^7.1.2
babel-plugin-import: ^1.6.3
babel-preset-env: ^1.6.1
babel-preset-react: ^6.24.1

#1. 在.babelrc中添加 react-hot-loader

// .babelrc
{
  "plugins": [
    "react-hot-loader/babel"
  ]
}

#2. webpacket.confg.js 中的設置

const path = require("path");
const webpack = require("webpack");
const moment = require("moment")

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");

const publish_date = moment().format("YYYYMMDD")

let config = {
  devtool: "eval-source-map",
  resolve: {
    extensions: [".js", ".jsx", ".json"]
  },
  entry: {
    app: [
      "react-hot-loader/patch",
      "./src/index"
    ]
  },
  module: {
    rules: [
      {
        test: /.jsx$/,
        exclude: /node_modules/,
        use: [{
          loader: "babel-loader"
        }]
      },
      {
        test: /.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /.less$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader", },
          { loader: "less-loader" }
        ]
      },
    ]
  },
  output: {
    path: path.resolve(__dirname, "dist", publish_date),
    filename: "[name].[hash].js",
    sourceMapFilename: "[name].[hash].map",
    publicPath: "/" + publish_date
  },
  plugins: [
    new WriteFilePlugin(),
    new HtmlWebpackPlugin({
      title: "RBAC",
      inject: true,
      template: "./index.html",
      filename: "index.html",
      chunksSortMode: "auto",
      minify: false,
      hash: false,
      xhtml: true,
      chunks: ["app"],
      cache: true,
      showErrors: true,
    }),
    new CopyWebpackPlugin([
      { from: "src/assets", to: "assets" }
    ]),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist", publish_date),
    hot: true,
    host: "0.0.0.0",
    port: 8000,
    publicPath: "/" + publish_date,
  }
}

module.exports = config;

devServer的 hot要設置為true

#3. 要在你的應用程序入口之前添加 react-hot-loader/patch, 如下:

let config = {
  devtool: "eval-source-map",
  resolve: {
    extensions: [".js", ".jsx", ".json"]
  },
  entry: {
    app: [
      "react-hot-loader/patch",
      "./src/index"
    ]
  },
  ...
  ...
  ...
}

在 #2 有完整的配置

#4. 入口文件要這樣

// index.js
import React from "react"
import ReactDOM from "react-dom"
// 導入HMR
import { AppContainer } from "react-hot-loader"
import App from "./containers/App"

// 定義一個熱加載回調函數用于重新渲染入口組件
const render = Component => {
  ReactDOM.render(
    
      
    ,
    document.getElementById("root"),
  )
}

// 啟動時調用
render(App)

// 當發送熱加載時調用, Webpack打包的生產環境不會有 `module.hot`, 因此這塊代碼在開發環境
// 下面的if塊里面的代碼不會執行
if (module.hot) {
  module.hot.accept("./containers/App", () => {
    render(App)
  })
}

#5. .babelrc 中的 modules 屬性

modules 屬性必須要設置為 false, 否則HMR無效

{
  "presets": [
    ["env", { "modules": false }], 
    "react"
  ],
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
    "react-hot-loader/babel"
  ]
}

#6. 最新如果你不用babel, 直接在配置文件中設置 react-hot-loader/webpack 加載器

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.jsx?$/,
        use: ["react-hot-loader/webpack"],
      },
    ],
  },
}

更新完畢 命令行

命令行方式是最簡單的方式, 如果項目只是純Web前端, 使用這種方式是最便捷的. 只需要在package.json文件中的scripts里面添加下面一行就可以了.

直接命令行:

webpack-dev-server --content-base=www --inline --watch --hot --progress --config webpack.config.js

通過 npm run dev 或 yarn run dev:

// package.json
"scripts": {
  "dev": "webpack-dev-server --content-base=www --inline --watch --hot --progress --config webpack.config.js",
  ...
},

參數說明:

--content-base: 靜態資源的目錄, 為 output.path 設置的目錄.

output: {   
   path: path.resolve(__dirname, "dist"), 
},

--watch: 監視模式, Web執行完打包后不退出, 一直監聽文件變化, Ctrl + S后自動構建變化的模塊, 及其依賴模塊.
--hot: 開啟模塊熱替換.
--progress: 顯示進度
--config: 指定配置文件 webpack.config.js 為默認文件名.

Webpack API

API的方式需要對webpack.config.js配置文件進行修改, 增加HotModuleReplacementPlugin插件.

Webpack 1.x

const path = require("path");
const webpack = require("webpack");

module.exports = {
  context: path.join(__dirname, "js"),
  entry: [
    "./index.js",
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080/",
  ],
  output: {
    path: path.join(__dirname, "www"),
    filename: "bundle.js",
    publicPath: "/",
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

Webpack 2.x

Webpack 2.x 需要一個額外配置 .babelrc, 增加 react-hot-loader/babel:

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

webpack.config.js 模塊加載器的配置, 和Webpack 1.x是不同的:

rules: [
  // Javascript模塊加載器
  {
    test: /.js|jsx$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: "babel-loader",
      options: {
        cacheDirectory : true,
        presets: [
          ["es2015", {modules: false}]
        ],
        // ES7
        plugins: [
          // 模塊動態導入
          "syntax-dynamic-import",
          "transform-async-to-generator",
          "transform-regenerator",
          // 運行時轉換
          "transform-runtime"
        ]
      }
    }
  },

中間件

需要編寫一個Express服務器, 并且把 webpack-dev-middleware 集成到自己的服務器中. 多用于需要高度定制的場景, 實際上之前的webpack-dev-server就是使用的 webpack-dev-middleware 來實現的, 這里可以證明.

const express = require("express");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const app = express();

const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
  // 啟用熱更
  hot: true,
  filename: "bundle.js",
  publicPath: "/assets/",
  stats: {
    colors: true,
  },
  // 路由需要的
  historyApiFallback: true,
}));

app.use(webpackHotMiddleware(compiler, {
  log: console.log,
  
  path: "/__webpack_hmr",
  heartbeat: 10 * 1000,
}));

app.get("/", function(req, res) {
  res.send("Hello World");
});

const server = app.listen(3000, function() {
  const host = server.address().address;
  const port = server.address().port;

  console.log("Example app listening at http://%s:%s", host, port);
});

對于這種形式的熱更, 需要配合使用 webpack-hot-middleware.

Javascript 模塊的熱替換

需要在入口文件里面添加 module.hot.accept 配置, 下面給出入口文件的完整代碼:

import React from "react";
import ReactDOM from "react-dom";

import {
  BrowserRouter as Router
  Route,
  Link
} from "react-router-dom"; // React Router v4 版本.

import App from "./App";

import { AppContainer } from "react-hot-loader";
const render = (Component) => {
  ReactDOM.render(
    
      
    ,
    document.getElementById("App")
  );
}
render(App);
if (module.hot) {
  module.hot.accept("./App", () => { render(App) });
}

原先直接掛載App, 要使用HMR, 需要在外層包一個容器.

多端同步刷新

這個視頻, 是Chrome, Safari, Firefox 三端同步操作的示例.

對于需要支持全平臺(移動, 桌面, Web)的開發, 可以使用 BrowerSync 這個神器. 它通過 Websocket 同步事件.

首先, 把模塊包含進來:

const BrowserSyncPlugin          = require("browser-sync-webpack-plugin");

其次, 配置插件:

new BrowserSyncPlugin({
  host: "localhost",
  port: 3000,
  // server: {            // 獨立服務器模式, 這里我使用的代理模式, 注釋掉了
  //   baseDir: ["dist"]  // 監視的目錄, 其中如果文件發生變化, 刷新頁面
  // },
  proxy: "http://localhost:8080/"
}, {
  name: "dev",
  reload: false // 不讓 BrowerSync 刷新頁面, 讓 webpack-dev-server 管理頁面是否需要刷新.
}),

這里我使用代理模式, 因為除了 BrowerSync 的功能外, 我還要使用 webpack-dev-server HMR功能. 具體配置參考: https://github.com/Va1/browse...

參考:

https://github.com/search?utf...
https://github.com/webpack/we...
https://github.com/glenjamin/...
http://acgtofe.com/posts/2016...
https://github.com/Va1/browse...

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82771.html

webpack工具鏈熱替換 -- angularjs的粗放式實現

摘要：參照組件單一職責，單個模塊文件僅承擔有限職責，。路由聲明與組件聲明在統一文件內部聲明。組件替換約定服務在內部屬于單例，實例聲明通過的方式，聲明服務。指令熱替換同樣采用較為粗放的容器定位策略，通過路由模板替換實現。 ng-hot-loader 前言 webpack-dev-server自帶支持模塊熱替換特性(HMR)，不刷新頁面實現代碼局部更新，使用HMR可以大幅提升開發效率。實現目標...

Eminjannn 2019-08-21 11:17 評論0 收藏0
Node.js 熱更新（一）

摘要：直到最近在使用微信機器人時，遇到了強烈的需求。增刪文件后熱更新上面的代碼已經不小心實現了增加文件后熱更新，因為表示檢測的更新，如果增加一個，那么就變成，于是新模塊不等于老模塊不存在，從而使用注冊事件監聽器。背景剛思考這個話題的時候，首先想到的是 Vue 或 React 的組件熱更新（基于 Webpack HMR），后來又想到了 Lua、Erlang 等語言的熱更新，不過在實際開發 ...

LancerComet 2019-08-20 15:41 評論0 收藏0
一份關于webpack2和模塊打包的新手指南

摘要：使用讓從打包文件中刪除未使用的導出項以減少文件大小。最后，用以下內容替換的部分在命令行中運行將以監視模式啟動，當目錄中的文件更改時，它將重新編譯。這種轉換涉及三個單獨的加載器和庫在配置文件中為文件添加新規則。 webpack已成為現代Web開發中最重要的工具之一。它是一個用于JavaScript的模塊打包工具，但是它也可以轉換所有的前端資源，例如HTML和CSS，甚至是圖片。它可以讓你...

tianren124 2019-08-20 18:34 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（四）

摘要：在前后端分離的前端項目開發中經常用到。是的一個中間件。即是一個重要的功能。配置先來在配置文件中引入添加一個和通信的客戶端添加應用入口文件在插件中引入在我們的開發環境中是這樣配置的。原文鏈接此文是我同事寫的，搭建Express結合Webpack。以下是正文，后面我會附上我的解讀 Express 結合 Webpack 實現HMR 本篇文件主要講結合 Webpack 和 Express 實...

StonePanda 2019-08-20 12:03 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（四）

摘要：在前后端分離的前端項目開發中經常用到。是的一個中間件。即是一個重要的功能。配置先來在配置文件中引入添加一個和通信的客戶端添加應用入口文件在插件中引入在我們的開發環境中是這樣配置的。原文鏈接此文是我同事寫的，搭建Express結合Webpack。以下是正文，后面我會附上我的解讀 Express 結合 Webpack 實現HMR 本篇文件主要講結合 Webpack 和 Express 實...

animabear 2019-08-01 15:54 評論0 收藏0