Webpack Dev Server 是一个开发服务器,它使得开发者可以快速开发和调试应用程序。它提供了实时重载(Live Reloading)、热模块替换(Hot Module Replacement, HMR)等功能。
主要功能
-
实时重载(Live Reloading): 当源代码发生变化时,Webpack Dev Server 会自动重新构建,并刷新浏览器页面以展示最新的代码变动。
-
热模块替换(Hot Module Replacement, HMR): 这个功能允许在应用程序运行时替换、添加或删除模块,而无需刷新整个页面。HMR 可以显著提升开发效率,特别是在样式和布局调整时。
-
中间件(Middleware): Webpack Dev Server 可以作为中间件与其他服务器(如 Express)集成,以便在复杂的项目中使用。
-
代理(Proxy): 开发过程中,可能需要将 API 请求代理到其他服务器。Webpack Dev Server 提供了代理功能,方便开发者处理跨域问题。
-
静态文件服务(Static File Serving): 可以指定一个目录,用于提供静态文件服务。
基本配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件
path: path.resolve(__dirname, 'dist') // 输出目录
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' // HTML 模板文件
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'), // 静态文件目录
compress: true, // 启用 gzip 压缩
port: 9000, // 服务器端口
open: true, // 自动打开浏览器
hot: true, // 启用 HMR
watchContentBase: true, // 监视静态文件变化
proxy: {
'/api': 'http://localhost:3000' // 代理 API 请求
}
},
mode: 'development' // 开发模式
};
主要选项解释
-
contentBase: 指定静态文件的根目录。Webpack Dev Server 将提供此目录中的所有文件。
-
compress: 启用 gzip 压缩以加速文件传输。
-
port: 指定服务器运行的端口,默认是 8080。
-
open: 自动打开浏览器并访问服务器地址。
-
hot: 启用热模块替换(HMR)。
-
watchContentBase: 监视 contentBase 目录下的文件变化,当文件变化时触发重载。
-
proxy: 配置代理,用于将特定 URL 的请求转发到其他服务器。例如,上面的配置会将所有
/api
开头的请求代理到http://localhost:3000
。
首先安装webpack dev server
pnpm i -D webpack-dev-server
配置webpack.config.js
devServer: {
// 开发服务器
static: {
directory: path.join(__dirname, "dist"), // 静态文件目录
},
compress: true,
port: 9000,
open: true,
hot: true,
// 监听html
watchFiles: ["./src/**/*.html"],
},
注意:静态文件目录如果存在二级目录,如:dist/html 这样就会不能正常浏览。还会出现 Cannot GET /
这样就可以不打包的情况下实现浏览