webpack实时重新加载 webpack-dev-server

还是先看版本对应号 版本不对应 否则会报错

webpack高版本相对应的版本号

   "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"

不使用webpack打包热加载问题

每一次手动打包很麻烦，打包后还需要手动刷新浏览器。
采用 webpack 提供的工具： webpack-dev-server ，它允许在运行时更新所有类型的模块后，而无需手动打包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。
1.先安装依赖
webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。设置如下：

npm install --save-dev webpack-dev-server@3.7.2 或者@3.11.2  看上面webpack对应的版本

2.在webpack.config.js文件中输入以下代码：

  devServer: { 
    
        contentBase: './dist', //时时重新加载 打包的dist文件
        //安装的最新版本的话使用contentBase会报错使用static解决
        //static: "./dist",
    },

新版本使用contentBase报错

2.在package.json文件下输入
“dev”: “webpack-dev-server --open”//现在失效了 更换webpack server --open

   "scripts": {
    "build": "webpack",
    "show": "webpack -v",
    "watch": "webpack --watch",//自动编译
    "dev": "webpack server --open"//打开刷新浏览器
  }

或者
package.json

  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "dev": "webpack server"//不加 --open
  },

  
 

  

webpack.config.js

  devServer: {
        contentBase: './dist', //时时重新加载
        //安装的最新版本的话使用contentBase会报错使用static解决
        // static: "./dist", 
        open: true,
    },

这样当你修改自己的代码文件的时候保存就会自动编译并且打开浏览器