webpack学习（六）：使用webpack-dev-serve

╰半橙微兮° 2022-04-06 13:21 240阅读 0赞

**demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]**  
上次使用source map功能: [https://blog.csdn.net/qq593249106/article/details/84921131\*\*][https_blog.csdn.net_qq593249106_article_details_84921131]

继上次配置完HtmlWebpackPlugin之后, 现在开始使用 webpack-dev-serve 方便开发, 当前目录结构:

webpack-dev-server提供了一个简单的 web 服务器, 并且能够实时重新加载(live reloading), 也就是启动了 webpack-dev-server 之后, 每次修改源文件代码就不用再手动重新构建, 它会自动检测到代码变化, 自动重新构建

## 安装 ##

npm install webpack-dev-server --save-dev

## 配置webpack.config.js ##

**webpack.config.js**

## 添加一个NPM脚本方便运行 ##

**package.json**

{ 
      "name": "demo05",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server --open" //--open的意思是开启服务器之后自动打开
      },
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "clean-webpack-plugin": "^1.0.0",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.27.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
      },
      "dependencies": { 
        "lodash": "^4.17.11"
      }
    }

## 运行服务器 ##

终端输入 npm run dev, 就会看到浏览器自动加载了网页, 这时候我在 index.js 修改代码, 它也会自动重新构建加载修改后的网页:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
开启服务器之后, 发现目录结构发生了变化:

dist 文件夹不见了, 这是因为被 CleanWebpackPlugin 给清除了, 这是因为使用 webpack-dev-serve 代码在服务器运行, 不会打包进 dist, 没有产生新的 dist 文件夹

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84921131]: https://blog.csdn.net/qq593249106/article/details/84921131**
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/9c5aa438603843408718ff446a3e58b4.png