webpack-dev-server 常用参数详解-JavaScript中文网-JavaScript教程资源分享门户

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. 示例代码

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist', // 将 dist 目录下的文件作为静态文件提供服务
    host: '127.0.0.1', // 访问地址为 http://127.0.0.1:8080/
    port: 3000, // 访问地址为 http://localhost:3000/
    open: true, // 自动打开浏览器
    compress: true, // 启用 Gzip 压缩
    hot: true, // 开启热更新
    quiet: true // 关闭请求日志输出
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'webpack-dev-server'
    })
  ]
};

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

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cffccde46428fe9ec63eb5

webpack-dev-server 常用参数详解