webpack指南之模块热替换

责编:menVScode 2017-07-18 14:26 阅读(1464)

        模块热替换

        模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。本页面重点介绍实现,而概念页面提供了更多关于它的工作原理以及为什么它有用的细节

        HMR 不适用于生产环境,这意味着它应当只在开发环境使用。更多详细信息,请查看生产环境构建指南

        启用 HMR

        启用此功能实际上相当简单。我们来看看如何使用 webpack-dev-server 来设置 HMR……

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

module.exports = {
  entry: './index.js',

  plugins: [
    new webpack.HotModuleReplacementPlugin() // 启用 HMR
  ],

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },

  devServer: {
    hot: true, // 告诉 dev-server 我们在使用 HMR
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
};

        不是太坏,嗯?我们使用 module.hot.accept 来测试一下……

index.js

import Library from './library';

if (module.hot) {
  module.hot.accept('./library', function() {
    console.log('Accepting the updated library module!');
    Library.log();
  })
}

library.js

export default {
  log() {
    // 在服务器启动后进行修改以进行测试
    console.log('Initial log...')
  }
}

        开始将 library.js 中的 console.log 语句,改为 Second log...',你应该在浏览器控制台中看到如下输出:

[HMR] Waiting for update signal from WDS...
main.js:9998 Initial log...
main.js:9468 [WDS] Hot Module Replacement enabled.
+ 2main.js:9468 [WDS] App updated. Recompiling...
+ main.js:9468 [WDS] App hot update...
+ main.js:9912 [HMR] Checking for updates on the server...
+ main.js:9982 Accepting the updated library module!
+ 0.1bafc70….hot-update.js:11 Second log...
+ main.js:9955 [HMR] Updated modules:
+ main.js:9957 [HMR]  - ./src/library.js
+ main.js:9894 [HMR] App is up to date.

        问题

        热模块更换可能很难掌握。例如,假设我有以下 class 类:

class Logger {
  log(text) {
    console.log('Logging some text: ', text)
  }
}

        即使包含此 class 类的底层模块已使用新代码进行修补(patch),任何现有的类实例仍然具有旧的 log 方法。也就是说,如果我们修改这个方法内部,那么旧的实例就不会被反映出来,除非我们以使用 module.hot.accept 的方式重新实例化它们。

        这只是一个例子,但还有很多其他人可以轻松地让人犯错的地方。幸运的是,有很多 loader 在,一些会在下面提到,这将使这个使用过程变得更容易。

        HMR 修改样式表

        在 style-loader 的帮助下,模块热替换(Hot Module Replacement)修改 CSS 实际上相当简单。当更新 CSS 依赖模块时,此 loader 在后台使用 module.hot.accept 来修补(patch) <style> 标签。所以,可以使用以下 webpack 配置...

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  // ...
}

        热加载样式表轻而易举……

index.js

import Lib from './library';
import './styles.css';
// ...

styles.css

body {
  background: blue;
}

        将 body 上的样式修改为 background: red;,您应该可以立即看到页面的背景颜色随之更改,而无需完全刷新。

        其他代码和框架

        社区还有许多其他 loader 和示例,可以使 HMR 与各种框架和库(library)平滑地进行交互……

        1. React Hot Loader:实时调整 react 组件。

        2. Vue Loader:此 loader 支持用于 vue 组件的 HMR,提供开箱即用体验。

        3. Elm Hot Loader:支持用于 Elm 程序语言的 HMR。

        4.  Redux HMR:无需 loader 或插件!只需对 main store 文件进行简单的修改。

        参考:https://doc.webpack-china.org/guides/hot-module-replacement/

标签: webpack
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码