当我们在开发过程中进行代码修改时，经常需要手动刷新浏览器来查看页面的变化。这不仅效率低下，还容易出现遗漏。幸运的是，Webpack提供了一个简单的方法来解决这个问题。本文将介绍如何使用Webpack来监听文件变化并自动刷新页面。
Webpack监听模式
Webpack提供了两种监听模式：轮询模式和通知模式。
-
轮询模式是指Webpack会每隔一段时间去检查文件的变化，从而决定是否重新构建项目。这个时间间隔是通过配置参数
watchOptions.poll来设置的，默认为300毫秒。 -
通知模式则是通过系统通知来告知Webpack文件变化的情况。这种模式可以大大节省CPU资源和响应时间。
我们可以通过在webpack.config.js中进行配置的方式来选择监听模式。
module.exports = {
// ...
watchOptions: {
poll: 1000, // 轮询模式的时间间隔（毫秒）
ignored: /node_modules/ // 忽略监听的文件夹
},
// ...
}
配置Webpack监听模式
首先，在你的项目根目录下创建一个webpack.config.js文件，然后将以下配置添加到配置文件中：
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件路径
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist') // 打包后的目录路径
},
// ...
devServer: {
contentBase: path.resolve(__dirname, 'dist'), // 静态文件目录路径
watchContentBase: true, // 监听静态文件的变化
inline: true // 使用inline模式，实时刷新
},
// ...
mode: 'development' // 开发模式
};
以上配置中，我们主要关注devServer属性。其中，contentBase指定了静态文件的目录路径，watchContentBase设置为true以监听静态文件的变化，inline指定了使用inline模式来实施实时刷新。
运行Webpack监听
在项目根目录下打开终端，执行以下命令来运行Webpack监听模式：
npx webpack-dev-server
然后，Webpack会启动一个本地开发服务器，并监听文件的变化。当文件发生改变时，Webpack会自动重新构建项目，并刷新浏览器以展示变化后的页面。
你可以在浏览器中访问http://localhost:8080来查看你的应用。
总结
使用Webpack监听模式可以使我们在开发过程中更加高效地进行代码修改。无需手动刷新浏览器来查看页面的变化，Webpack会自动帮我们实时刷新。配置Webpack监听模式只需要简单的几步，非常方便易用。希望本文对你在使用Webpack监听文件变化自动刷新页面上有所帮助！
本文来自极简博客，作者：薄荷微凉，转载请注明原文链接：使用Webpack监听文件变化自动刷新页面
