【webpack】DevServer

一，作用

• 提供 HTTP 服务，而不是使用本地文件预览
• 监听文件的变化并自动刷新网页，做到实时预览
• 支持 Source Map，方便调试
• 支持 Proxy 代理，处理跨域问题

二，安装

npm i -D webpack-dev-server

三，启动

• With the CLI 在 webpack.config.js 目录下敲入一下命令

  node_modules/ .bin/webpack-dev-server
  

• With NPM Scripts

  "scripts": {
    "start": "webpack-dev-server"
  }
  

随后使用 npm run start 命令启动 DevServer

四，实时预览

• webpack 在启动时可以开启监听模式，监听本地文件系统的变化，在发生变化时重新构建出新的结果。 webpack 默认关闭监听模式。

  "scripts": {
      "watch": "webpack --watch"
    }
  

• 通过 DevServer 启动会默认开启监听模式，网页和 DevServer 之间通过 WebSocket 协议通信。

• webpack 在启动时会以配置文件中的 entry 为入口去递归出 entry 所依赖的文件，只有 entry 本身和依赖的文件才会被 webpack 添加到监听列表里。

五，核心概念

• Entry：入口

• Module：模块。在 webpack 中，一切皆模块，一个模块对应一个文件

• Chunk：代码块。一个 Chunk 由多个模块组成，用于代码合并与分割。

• Loader：模块转化器

• Plugin：扩展插件。在 webpack 构建流程中的特定时机注入扩展逻辑

• Output：输出结果