webpack当打包的依赖文件被修改时自动重新编译自动刷新浏览器运行效果 (WebpackDevServer)

瑞晟技术服务中心-耿瑞

已于 2022-01-30 14:46:54 修改

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： webpack javascript 前端

于 2022-01-26 15:27:44 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/122702314

本文介绍如何使用Webpack搭建前端项目的开发环境，并实现文件更改后的自动更新功能。文章详细讲解了安装webpack-dev-server、配置webpack.config.js文件的过程，以及如何运行项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章会基于我 (webpack打包时生成一个HTML 自动引入打包的js逻辑文件 (HtmlWebpackPlugin)) 这篇文章搭建的项目环境开展
没有看过这篇文章的话，建议去看一下
https://blog.csdn.net/weixin_45966674/article/details/122695188?spm=1001.2014.3001.5501
首先我们在项目终端执行

npm install webpack-dev-server --save

将webpack-dev-server导进来

在webpack.config.js中添加devServer
webpack.config.js参考代码如下

//通过node获取到当前文件的位置
const path = require('path')
//导入刚引入的第三方插件html-webpack-plugin
const HtmlWebpackPplugin = require('html-webpack-plugin')
module.exports = {
    //设置当前入口文件
    entry: './src/index.js',
    //出口配置
    output: {
      //打包的文件名
      filename: 'bundle.js',
      //生成的文件位置
      path: path.resolve(__dirname, './distribution')
      //设置自动清理掉原本的打包文件
      //clean: true
    },
    mode: 'none',
    //webpack插件配置
    plugins: [
      //实例化html-webpack-plugin插件功能
      new HtmlWebpackPplugin({
        //html-webpack-plugin参数配置
        //指定打包HTML文件参照的模板HTML
        template: './src/index.html',
        //生成的html文件名称
        filename: 'app.html',
        //定义打包的js文件引入在新html的哪个标签里
        inject: 'head'
      })
    ],
    //设置webpack-dev-server监听属性
    devServer: {
      //设置webpack-dev-server监听路径
      static: './distribution'
    }
}

package.json修改build 为 “build”: “webpack-dev-server” 和 “webpack”: “webpack”
在这里插入图片描述

在终端执行

npm run webpack

重新打包然后在终端执行

npm run build

项目就开始运行了
文件就会输出可访问路径
在这里插入图片描述
我们通过浏览器访问这个路径

我们点击app.html进入页面

控制台成功输出了监控信息
当我们修改src下文件内容时页面也会自动更新内容不需要手动刷新了
例如我们打开output.js
将文本输出的信息改一下
output成功执行改为 output成功修改
然后浏览器就会自动更新出最新的效果
在这里插入图片描述