使用 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"
📖