Webpack 是一款强大的前端打包工具，其中自动刷新及热重载功能是前端开发必备的工具之一。本文将介绍 Webpack 自动刷新及热重载的实现方式，并提供相应的示例代码，帮助更好地了解和应用这些功能。
自动刷新
自动刷新的实现方式主要是通过 Webpack 提供的 Webpack-dev-server 插件来实现。
安装 Webpack-dev-server 插件
首先需要全局安装 Webpack-dev-server 插件，可以使用以下命令：
npm install webpack-dev-server -g
配置 Webpack-dev-server
在 Webpack 配置文件中，使用 Webpack-dev-server 插件，配置如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------------- - ------------------------------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - --------- ------------------- ----- ----------------------- ---------- -- -------- - --- ------------------- --------- ----------------------- -------------------- --- --- ------------------------------------ -- ---------- - ------------ -------------------- -------- --------- ----- ----- ----- ----- ----- ---- ---- - --展开代码
其中，devServer 的配置项中：
contentBase: 配置服务器所需的文件资源的根目录，默认不指定则使用当前工作目录作为根目录。compress: 是否启用 gzip 压缩。port: 服务器监听的端口号。open: 是否自动打开浏览器。hot: 启用热重载功能。
运行 Webpack-dev-server
在控制台中运行以下命令，启动 Webpack-dev-server：
webpack-dev-server --config webpack.config.js
访问 http://localhost:9000/ 即可看到自动刷新的效果。
热重载
热重载的实现方式与自动刷新略有不同，需要使用 Webpack Hot Middleware 插件和 Webpack Hot Module Replacement (HMR) API。
安装 Webpack Hot Middleware 插件
首先需要安装 Webpack Hot Middleware 插件，可以使用以下命令：
npm install webpack-hot-middleware --save-dev
配置 Webpack Hot Middleware
在 Webpack 配置文件中，修改配置如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------------- - ------------------------------- ----- ---- - ---------------- -------------- - - ------ --------------------------------- ------------------ ------- - --------- ------------------- ----- ----------------------- ---------- -- -------- - --- ------------------- --------- ----------------------- -------------------- --- --- ------------------------------------- --- ------------------------------ -- -------- -------------------- ---------- - ------------ -------------------- -------- --------- ----- ----- ----- ----- ----- ---- ---- - --展开代码
其中，entry 的设置为 ['webpack-hot-middleware/client', './src/index.js']，引入了 Webpack Hot Middleware 的客户端。
plugins 中添加了 webpack.NoEmitOnErrorsPlugin() 插件，用于在编译出现错误时，跳过输出阶段，保证输出资源不会包含错误。
devtool 的设置为 inline-source-map，使得每个文件的源代码映射到输出文件中，便于调试。
添加 HMR API
在入口文件 index.js 中添加以下代码：
if (module.hot) { module.hot.accept('./print.js', function () { console.log('Accepting the updated printMe module!'); printMe(); }) }
其中，module.hot 判断是否支持热重载。module.hot.accept 监听 ./print.js 模块的变化，当模块变化时，执行回调函数中的代码。
运行 Webpack-dev-server
在控制台中运行以下命令，启动 Webpack-dev-server：
webpack-dev-server --config webpack.config.js
访问 http://localhost:9000/ 可以看到页面无刷新更新内容的效果。
示例代码
完整的示例代码可参照以下仓库：
https://github.com/cxyfreedom/webpack-learning-notes
总结
通过本文的介绍，可以了解到 Webpack 自动刷新及热重载的实现方式，并通过示例代码更好地理解和应用这些功能。在实际开发中，合理使用这些功能可以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651eb39595b1f8cacd6603e4
