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 /

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

相关推荐
棉花糖超人4 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐9 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台9 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue