使用 Webpack 热加载功简单页面(Hot Module Reload)

11.18

介绍

平时测试一些代码或功能时只用到一个 html 和一个 js/css 文件。希望能自动重载频繁修改的 js/css 文件。也就是实现单文件的 Hot Module Reload。

准备

新建一个测试目录,并用 npm 初始化

npm init

安装模块

可能会遇到找不到模块的报错,在全局和当前目录都安装 webpack 和 webpack-dev-server 解决。

由于最新版本有兼容性问题,指定已知可用的版本安装。

npm install webpack@2.2.1 webpack-dev-server@2.9.1 -g
npm install webpack@2.2.1
# npm install  webpack-dev-server@2.9.1
npm install css-loader style-loader

相关文件

准备相关文件:tmp.html, tmp.js, tmp.css

tmp.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>
    content
  </div>
  <script src="bundle.js"></script>
</body>
</html>

tmp.js

require('./tmp.css');
console.log('Hello!');

tmp.css

div {
  background: green;
}

运行

当前目录输入命令

webpack-dev-server ./tmp.js --hot --inline --module-bind "css=style-loader!css-loader"

在浏览器中访问 http://localhost:8080/tmp.html。成功后修改 js/css 文件,页面将会自动刷新。

可以整合成一个脚本:

chrome http://localhost:8080/tmp.html &
webpack-dev-server ./tmp.js --hot --inline --module-bind "css=style-loader!css-loader"

参考

注意,本文中,参考文档的参数需修改为"css=style-loader!css-loader"

webpack hot-module-reload

📖