详解webpack的文件监听实现(热更新)
(编辑:jimmy 日期: 2024/12/25 浏览:3 次 )
前言
文件监听是在源码发生变化时,自动重新构建出新的输出文件。
webpack 开启监听模式,有两种方式:
1.启动 webpack 命令时,带上 --watch 参数。
唯一缺点:需要手动刷新才能看到变化;
2.在配置 webpack.config.js 中设置 watch: true。
优点:
(1) WDS 不刷新浏览"color: #ff0000">1 第一种方式, --watch
1.1 配置package.json
{ // ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "watch": "webpack --watch" // 新增配置 } // ... }
1.2 到控制台输入 npm run watch
1.3 修改文件,保存后,会自动打包,到浏览器刷新,才能看到变化。
1.4 文件监听的原理"htmlcode">
module.export = { //默认 false,也就是不"color: #ff0000">2 第二种方式,在配置 webpack.config.js 中设置 watch: true(热更新:webpack-dev-server)2.1 配置package.json
{ // ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack-dev-server --open" // 新增配置,运行 npm run dev 会自动打开浏览器 } // ... }2.2 配置webpack.config.js
'use strict' const path = require('path'); var webpack = require('webpack'); // 引进 webpack module.exports = { // ... mode:'development', // production 改为开发环境,因为只有开发环境才用到热更新 module:{ // ... }, plugins:[ new webpack.HotModuleReplacementPlugin() ], devServer:{ contentBase:'./dist', hot: true } }2.3 到控制台运行 npm run dev,即可运行!
下一篇:js代码编写无缝轮播图