DDR爱好者之家

详解webpack的文件监听实现(热更新)
站长资源 2024/12/25 佚名
73 1538
DDR爱好者之家 Design By 杰米

前言

文件监听是在源码发生变化时，自动重新构建出新的输出文件。
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

详解webpack的文件监听实现(热更新)

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，即可运行！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米