webpack 热加载你站住，我对你好奇很久了
Posted SegmentFault
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 热加载你站住，我对你好奇很久了相关的知识，希望对你有一定的参考价值。
使用 webpack 有一段时间了，其中的模块热加载加快了开发的速度。它无需刷新，只要修改了文件，客户端就立刻做热加载。如何做到？当然理解他的最好的做法就是我们自己做一遍。
本文关心的是：
dev-middleware 内部
HMR(webpack-hot-middleware）的利用
这次提供热加载的代码共两个文件（放置于 src 内），a 依赖于 b，并调用 b 的引出函数：
// a.js
var b = require("./b.js")
b.b()
// b.js
exports.b = function b(){
console.log("h")
}首先我需要使用 dev-middleware 让使用 require 函数成为可能，其次我希望使用 HMR，当 b 文件内修改时，可以自动热加载，而不是必须完整 reload 才可以。当然，按照 webpack 的管理，我们需要一个入口 index.html，放置于 output 内:
<html>
<body> <script type="text/javascript" src="bundle.js"></script> </body>
</html>希望热加载的代码就是这样了。目录结构如下：
├── output
│ ├── bundle.js
│ └── index.html
├── package.json
├── server.js
└── src
├── a.js
└── b.js其中的 server.js 在随后创建。现在我们创建环境，让它可以热加载：
创建目录环境的命令为：
mkdir src
touch src/a.js
touch src/b.js
mkdir output
touch output/index.html
touch server.js创建环境
npm init -y
npm install express --save
npm install webpack webpack-dev-middleware webpack-hot-middleware --save-dev创建服务器文件
此服务器文件使用 express 创建服务器监听，使用 dev 中间件，HMR 中间件：
var express = require('express')
var webpack = require('webpack')
var path = require('path')
var app = express()
var webpackMiddleware = require("webpack-dev-middleware");
var compiler = webpack({
entry:
["./src/a.js",
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
],
output: {
path: path.resolve(__dirname, './output/'),
filename:'bundle.js',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin()
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
})
var options ={
publicPath: "/",
}
app.use(webpackMiddleware(compiler, options));
app.use(require("webpack-hot-middleware")(compiler));
app.use(express.static('output'))
app.listen(8080, function () {
console.log('Example app listening on!')
})其中 dev 中间件中涉及到的入口文件的做法和一般的 webpack 做法一样，但是多出一个 webpack-hot-middleware/client 文件，此文件用来传递到客户端，并和服务器的 HMR 插件联络，联络的 URL 为path=/__webpack_hmr&timeout=20000,其中 path 有 HMR 服务监听，timeout 则可以望文生义，知道失联的话，达到20000毫秒就算超时，不必再做尝试。
为了让 HMR 知道 a、b 文件是可以热加载的，必须在入口文件内（也就是 a.js)内的尾部加入代码：
if (module.hot) {
module.hot.accept();
}也就是说 a.js 得修改为：
// a.js
var b = require("./b.js")
b.b()
if (module.hot) {
module.hot.accept();
}现在执行服务：
node server.js打开浏览器，访问 localhost:8080 ,并打开 Chrome devtools,看到
bundle.js:1916 h
bundle.js:1626 [HMR] connected现在修改 b.js 内的字符串为 hello HMR，看到 Console 输出：
Hello HMR
bundle.js:1847 [HMR] Updated modules:
bundle.js:1849 [HMR] - ./src/b.js
bundle.js:1849 [HMR] - ./src/a.js
bundle.js:1854 [HMR] App is up to date.就是说 HMR 已经激活。
ref :
【以往热门文章推荐】
Rresn -
songjz -
Cinwell -
tinylcy -
xixicat -
以上是关于webpack 热加载你站住，我对你好奇很久了的主要内容，如果未能解决你的问题，请参考以下文章