图解 Webpack 4.x 热更新原理 All In One

图解 Webpack 4.x 热更新原理 All In One

Webpack HMR

⚠️ module.hot & module.hot.accept

if (module.hot) {
  module.hot.accept('./index.js', function() {
    console.log('✅🔥🚀 在 APP 的入口统一控制 HMR');
    // app();
  })
}

模块模块热替换

原理

https://webpack.docschina.org/concepts/hot-module-replacement/

guide

https://webpack.docschina.org/guides/hot-module-replacement

API

https://webpack.docschina.org/api/hot-module-replacement/

https://webpack.docschina.org/plugins/hot-module-replacement-plugin/

WDS / webpack-dev-server

https://webpack.js.org/guides/development

https://github.com/webpack/webpack-dev-server

https://webpack.docschina.org/configuration/dev-server/#devserverhot

hot

module.exports = {
  //...
  devServer: {
    hot: true
  }
};

hotOnly

module.exports = {
  //...
  devServer: {
    hotOnly: true
  }
};

WDM / webpack-dev-middleware

https://webpack.js.org/guides/development/#using-webpack-dev-middleware

https://github.com/webpack/webpack-dev-middleware

$ npm i -D express webpack-dev-middleware

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
    },
    plugins: [
      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
      new HtmlWebpackPlugin({
        title: 'Output Management',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      // dev-server path
       publicPath: '/',
    },
  };

https://www.npmjs.com/package/webpack-dev-middleware#usage

const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const compiler = webpack({
  // webpack options
});
const express = require('express');
const app = express();
 
app.use(
  middleware(compiler, {
    // webpack-dev-middleware options
  })
);
 
app.listen(3000, () => console.log('Example app listening on port 3000!'));

dev-server 🔑

https://webpack.js.org/configuration/dev-server/#devserverpublicpath-

module.exports = {
  //...
  devServer: {
    publicPath: '/assets/'
  }
};

module.exports = {
  //...
  devServer: {
    publicPath: 'http://localhost:8080/assets/'
  }
};

refs

https://time.geekbang.org/course/detail/100028901-98391

https://zhuanlan.zhihu.com/p/52465785

https://juejin.im/post/6844904008432222215

https://github.com/luobotang/webpack-hmr-demo

https://www.jianshu.com/p/652fbae768bf

https://mp.weixin.qq.com/s/2L9Y0pdwTTmd8U2kXHFlPA

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---