webpack dev server -- 以及修改html页面不更新问题

Webpack Dev Server 是一个开发服务器,它使得开发者可以快速开发和调试应用程序。它提供了实时重载(Live Reloading)、热模块替换(Hot Module Replacement, HMR)等功能。

主要功能

  1. 实时重载(Live Reloading): 当源代码发生变化时,Webpack Dev Server 会自动重新构建,并刷新浏览器页面以展示最新的代码变动。

  2. 热模块替换(Hot Module Replacement, HMR): 这个功能允许在应用程序运行时替换、添加或删除模块,而无需刷新整个页面。HMR 可以显著提升开发效率,特别是在样式和布局调整时。

  3. 中间件(Middleware): Webpack Dev Server 可以作为中间件与其他服务器(如 Express)集成,以便在复杂的项目中使用。

  4. 代理(Proxy): 开发过程中,可能需要将 API 请求代理到其他服务器。Webpack Dev Server 提供了代理功能,方便开发者处理跨域问题。

  5. 静态文件服务(Static File Serving): 可以指定一个目录,用于提供静态文件服务。

基本配置

javascript 复制代码
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' // 开发模式
};

主要选项解释

  1. contentBase: 指定静态文件的根目录。Webpack Dev Server 将提供此目录中的所有文件。

  2. compress: 启用 gzip 压缩以加速文件传输。

  3. port: 指定服务器运行的端口,默认是 8080。

  4. open: 自动打开浏览器并访问服务器地址。

  5. hot: 启用热模块替换(HMR)。

  6. watchContentBase: 监视 contentBase 目录下的文件变化,当文件变化时触发重载。

  7. proxy : 配置代理,用于将特定 URL 的请求转发到其他服务器。例如,上面的配置会将所有 /api 开头的请求代理到 http://localhost:3000

首先安装webpack dev server

javascript 复制代码
pnpm i -D webpack-dev-server

配置webpack.config.js

javascript 复制代码
  devServer: {
    // 开发服务器
    static: {
      directory: path.join(__dirname, "dist"), // 静态文件目录
    },
    compress: true,
    port: 9000,
    open: true,
    hot: true,
    // 监听html
    watchFiles: ["./src/**/*.html"],
  },

注意:静态文件目录如果存在二级目录,如:dist/html 这样就会不能正常浏览。还会出现 Cannot GET /

这样就可以不打包的情况下实现浏览

相关推荐
华科云商xiao徐1 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价2 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花3 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb10133 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树4 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜5 分钟前
跨平台UI自动化-Appium
前端
海底火旺6 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
不要进入那温驯的良夜6 分钟前
浏览器技术原理
前端
在泡泡里6 分钟前
前端 mcp 的使用
前端
爱学习的茄子8 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试