博客站

配置 Webpack 的开发服务器（DevServer）可以极大地提升开发效率，提供实时重新加载、热模块替换（HMR）等功能。以下是配置 Webpack DevServer 的详细步骤：

1. 安装 webpack-dev-server

首先，需要安装 webpack-dev-server：

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

2. 配置 webpack.config.js

在 webpack.config.js 中配置 devServer 选项。

示例配置

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'), // 指定静态文件目录
    },
    compress: true, // 启用 gzip 压缩
    port: 9000, // 指定端口号
    hot: true, // 启用热模块替换（HMR）
    open: true, // 自动打开浏览器
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  mode: 'development'
};

3. devServer 配置选项详解

以下是常用的 devServer 配置选项：

static.directory

• 作用：指定静态文件目录。
• 示例：

  static: {
    directory: path.join(__dirname, 'dist')
  }
  

compress

• 作用：启用 gzip 压缩。
• 示例：

  compress: true
  

port

• 作用：指定开发服务器的端口号。
• 示例：

  port: 9000
  

hot

• 作用：启用热模块替换（HMR），允许在运行时更新模块而无需完全刷新页面。
• 示例：

  hot: true
  

open

• 作用：自动打开浏览器。
• 示例：

  open: true
  

proxy

• 作用：配置代理，解决跨域问题。
• 示例：

  proxy: {
    '/api': 'http://localhost:3000'
  }
  

historyApiFallback

• 作用：启用 HTML5 History API 回退，适用于单页应用（SPA）。
• 示例：

  historyApiFallback: true
  

4. 运行开发服务器

配置完成后，可以通过以下命令启动开发服务器：

npx webpack serve

或者，在 package.json 中添加脚本：

"scripts": {
  "start": "webpack serve"
}

然后运行：

npm start

5. 完整配置文件示例

以下是一个完整的 Webpack 配置文件，包含 DevServer 配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    hot: true,
    open: true,
    proxy: {
      '/api': 'http://localhost:3000'
    },
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  mode: 'development'
};

6. 总结

通过配置 webpack-dev-server，可以快速搭建一个支持实时重新加载、热模块替换的开发环境。主要步骤包括：

1. 安装 webpack-dev-server。
2. 在 webpack.config.js 中配置 devServer 选项。
3. 运行开发服务器。

常用的 devServer 配置选项包括 static.directory、compress、port、hot、open、proxy 和 historyApiFallback。根据项目需求，可以灵活调整这些配置。