Webpack工程化笔记(三)：webpack-dev-serv

Webpack社区提供了一个便捷的本地开发工具webpack-dev-server
安装命令如下：

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

安装指令的过程中我们会经常使用到--save-dev这个是将工程的devDependencies(开发环境依赖)记录到package.json中去，一般使用这个参数就表示只会在开发环境的时候会使用到，生产环境使用不到。

• package.json文件添加命令：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack工程化的demo演示",
  "main": "index.js",
  "author": "xiaochen",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  ....
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  }
  ....
}

• webpack.config.js文件添加devServer对象：
  在webpack.config.js文件添加devServer对象，是专门用于存放webpack-dev-server配置的，webpack-dev-server主要是用于接收浏览器的请求，然后将资源返回。

当服务启动时，webpack会先进行模块打包导出(dist下的bundle.js)，当webpack-dev-server接收到浏览器的资源请求时，会首先进行URL地址校验，如果地址是资源服务地址(publicPath)，就会在bundle.js中找对应的资源文件返回给浏览器，如果不是publicPath，将会直接读取硬盘中的源文件返回。

const { resolve } = require("path");

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path:resolve(__dirname, "build")
    },
    mode: 'development',
    devServer: {
        static: {
            publicPath: './bundle.js',
        },
        compress: true,
        port: 8000,
        open:true
    }
}

然后在vscode编辑器中打开live-server，webstorm那种的话就不需要此操作，接着可以选择你需要运行的项目。

图1.png
可以看到 每次webpack-dev-server接收到请求时都只是将内存中的打包结果bundle.js发送给浏览器。

webpack-dev-server最方便的就是它的live-reloading（自动刷新）的特性，该特性的原理在于：当webpack-dev-server发现工程源文件进行了更新操作就会自动刷新浏览器，展示更新后的内容。