2021最新版webpack-dev-server配置

问题解析:

最近在配置webpack-dev-server的时候，发现网上很多教程的webpack版本都是v3v4左右的，我用的是^5.24.2，所以导致webpack-dev-server配置的时候出现各种错误，翻了很多前辈的文章，终于解决了这个问题，于是总结了这篇文章，希望有需要的人可以看到这篇文章并有所帮助。

1.安装插件

这里需要注意webpack-cli需要全局安装，webpack和webpack-dev-server只需要项目内安装即可

npm i webpack -D
npm i webpack-cli -g
npm i webpack-dev-server -D

提示 如果报错的话用 cnpm 代替npm 前提是安装了cnpm
下面是我的版本号“

接着就是 终端输入：npm init -y 初始化项目

2.配置文件

（1）package.json 文件配置：
需要在scripts里面添加：

"dev": "webpack serve --mode development --env development"

（2）webpack.config.js配置
需要在根路径下新建webpack.config.js 这个文件
里面的内容如下：

const path = require('path');
 
module.exports = {
   
  entry:'./src/main.js', //js入口文件;
  output:{
   
          path:path.resolve(__dirname,'dist'),//利用path包获取绝对文件路径
          filename:'bundle.js'//打包成功后的文件名<br>
  }, //js出口文件;路径加文件名;
 
 
}

3.配置script

使用webpack-dev-server这个工具，自动打包的bundle.js文件，并没有存放到实际的物理磁盘，但是，这个bundle.js文件被托管到了内存中，可以认为在项目的根目录中，有一个虚拟的，看不见的bundle.js
所以引用的时候，直接引用根路径的bundle.js即可

<script src="/bundle.js"></script>

4.跑起来

npm run dev