webpack-dev-server 常用参数详解-FunTeaLearn Online Web Tutorials

webpack-dev-server 是一个能够在本地启动 web 服务器，并为开发者提供一个可以调试、热更新的开发环境。使用 webpack-dev-server 可以大大提高我们的开发效率。在这篇文章中，我们将详细介绍 webpack-dev-server 常用参数的使用及其指导意义，希望对大家有所帮助。

1. 常用参数介绍

1.1. --content-base

该参数用于指定静态文件的访问路径，devServer 会从该路径提供服务。默认是当前工作目录。

module.exports = {
  devServer: {
    contentBase: './dist' // 将 dist 目录下的文件作为静态文件提供服务
  },
  // ...
}

1.2. --host

该参数用于指定服务运行的域名或 IP，默认为 localhost。

module.exports = {
  devServer: {
    host: '127.0.0.1' // 访问地址为 http://127.0.0.1:8080/
  },
  // ...
}

1.3. --port

该参数用于指定服务运行的端口号，默认为 8080。

module.exports = {
  devServer: {
    port: 3000 // 访问地址为 http://localhost:3000/
  },
  // ...
}

1.4. --open

该参数用于在服务启动时自动打开浏览器。

module.exports = {
  devServer: {
    open: true // 自动打开浏览器
  },
  // ...
}

1.5. --compress

该参数用于指定是否启用 Gzip 压缩功能。

module.exports = {
  devServer: {
    compress: true // 启用 Gzip 压缩
  },
  // ...
}

1.6. --hot

该参数用于指定是否开启热更新功能。

module.exports = {
  devServer: {
    hot: true // 开启热更新
  },
  // ...
}

1.7. --quiet

该参数用于关闭 devServer 的请求日志输出。

module.exports = {
  devServer: {
    quiet: true // 关闭请求日志输出
  },
  // ...
}

2. 指导意义

配置好 webpack-dev-server 的参数后，我们可以使用 npm run dev 命令启动服务。在开发过程中，每当我们修改代码时，devServer 会自动重新构建和刷新页面，这样我们就不需要手动去重新编译和刷新浏览器了，大大提高了我们的开发效率。

在配置 webpack-dev-server 的过程中，需要注意的是 devServer 的配置需要写在 webpack 配置文件中的 devServer 属性中，而不是在命令行中去添加参数。

3. 示例代码

-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------

-------------- - -
  ----- --------------
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ---------- -
    ------------ --------- -- - ---- ----------------
    ----- ------------ -- ----- ----------------------
    ----- ----- -- ----- ----------------------
    ----- ----- -- -------
    --------- ----- -- -- ---- --
    ---- ----- -- -----
    ------ ---- -- --------
  --
  -------- -
    --- -------------------
      --------- -------------------
      ------ --------------------
    --
  -
--

总之，webpack-dev-server 在前端开发中起着非常重要的作用，带来了极大的便利性和优势。详细了解和掌握其参数的使用可以让我们更高效地进行开发，减少不必要的时间浪费。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cffccde46428fe9ec63eb5

webpack-dev-server 常用参数详解