Webpack Dev Server 教程

Webpack Dev Server 教程

webpack-dev-serverServes a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.项目地址:https://gitcode.com/gh_mirrors/we/webpack-dev-server

1. 项目介绍

Webpack Dev Server 是一个基于 HTTP/2 的小型服务器，它能够与 Webpack 配合工作，实现热重载、实时编译等功能，极大地加速前端应用的开发流程。通过在本地运行，它可以将你的源代码转换并服务于一个可交互的环境中，无需构建过程中的文件写入磁盘。

2. 项目快速启动

安装依赖

确保已经安装了 Node.js 和 npm。然后，在你的项目目录中执行以下命令：

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

配置 webpack.config.js

创建或更新 webpack.config.js 文件：

module.exports = {
  mode: 'development',
  entry: './src/index.js', // 你的入口文件
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  devServer: {
    contentBase: './dist', // 指定静态资源目录
    hot: true // 开启热更新
  }
};

运行服务

在终端中运行以下命令启动 Webpack Dev Server：

npx webpack serve

浏览器将会自动打开 http://localhost:8080 显示你的应用。

3. 应用案例和最佳实践

热更新(Hot Module Replacement)

在 webpack.config.js 中启用 hot: true 可以开启热更新。当代码改变时，只更新变动的部分，而不是重新加载整个页面。

自动打开浏览器

添加 open: true 到 devServer 配置，WebPack Dev Server 将会在编译完成后自动打开浏览器。

devServer: {
  ...
  open: true
}

接口代理

如果你的应用需要向 API 服务器发送请求，可以配置代理来转发请求到目标地址：

devServer: {
  proxy: {
    '/api': {
      target: 'http://api.example.com'
    }
  }
}

4. 典型生态项目

Webpack Dev Server 在实际项目中常常与其他工具一起使用，例如：

• React - 使用 Create React App，内部集成了 Webpack Dev Server。
• Vue CLI - Vue 的脚手架工具，也内置了对 Webpack Dev Server 的支持。
• Angular CLI - Angular 的开发环境也默认配备了这个服务器。

此外，很多自定义的前端构建系统也会采用 Webpack Dev Server 来提供开发环境。

---

以上就是关于 Webpack Dev Server 的基本使用和实践，希望对你有所帮助。更多详细配置及高级特性可参考其 官方文档。

webpack-dev-serverServes a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.项目地址:https://gitcode.com/gh_mirrors/we/webpack-dev-server