图解 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
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13487959.html
未经授权禁止转载,违者必究!