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

这篇文章会基于我 (webpack打包时生成一个HTML 自动引入打包的js逻辑文件 (HtmlWebpackPlugin)) 这篇文章搭建的项目环境开展
没有看过这篇文章的话，建议去看一下
https://blog.csdn/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成功修改
然后浏览器就会自动更新出最新的效果

非常的方便