webpack 提供了 webpack-dev-server 可用于快速开发应用程序，不用我们自己启动服务了。
不过使用之前需要安装 webpack-dev-server 包

安装

  1. yarn add webpack-dev-server --dev

使用

运行配置

  • 通过配置 package.json 中的 script

    1. /** ./package.json **/
    2. {
    3. //...
    4. "script": {
    5.   "dev":"webpack-dev-server"
    6. }
    7. //..
    8. }

  • 直接通过指令运行

    npx webpack-dev-server

    启动配置

    只需要在 webpack.config.js 中的 devServer 属性配置即可，非常方便。

    /** ./webpack.config.js **/
module.exports = {
//...
devServer: {
  port: 3000,//服务启动的端口号
  //open: true,//自动打开浏览器
  compress: true, //启用 gzip 压缩
  static: './dist',//express.static(dist)
  //默认打包的结果通过webpack-dev-server 放到内存中的，
  //而且目录是当前的根目录，contentBase 在启动一个静态文件目录（在文件夹中是找不到打包文件的）
}
//...
}

    参数

    下面是常用的参数

  • port 服务启动的端口号 number

  • open 是否自动打开浏览器 boolean
  • compress 是否启用 gzip 压缩 boolean
  • static 静态文件的路径 string，相当于express.static(dist)

    结果

    上面 port 配置了 3000 端口，文件路径设置完成了 ‘./dist’，所以根路径就是 dist，
    访问时不需要加 /dist，直接访问 127.0.0.1:3000/index.html 就行
    image.png