webpack5和webpack-dev-server4.3升级的兼容问题-开发环境项目根路径静态资源丢失-原因-解决

最新推荐文章于 2022-10-22 22:42:05 发布
最新推荐文章于 2022-10-22 22:42:05 发布
阅读量579 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liixnhai/article/details/117373624
版权

一、webpack开发环境，devserver上能直接访问内容原因。

注意，只有webpack构建入口关联的内容，才有输出，有输出才可挂到内存。然后，webpack-dev-middleware，利用中间件挂载路径方式，给webpack-dev-server内express，让我们访问。

 

二、webpack-dev-server 4.3-beta比3.0比BREAKING CHANGES改动

与webpack5官方文档严重不符合，影响webpack5开发环境下，项目根路径下静态资源中间件默认挂载方式。

4.3-beta

 

3.x

 

 

三、解决

给webpack5，配置static，让用process.cwd()

信海利世
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【webpack5修行之道】第3篇：webpack配置devServer
j178202798的博客
06-17 1366
上一篇我们介绍了：webpack5修行之道3-webpack配置devServer 前两篇文章的里将的代码修改后的方式是： 手动执行npm run build编译命令，然后去刷新浏览器，这种方式未免也太麻烦了吧？ 对的，webpack已经帮我们想到了，webpack提供了webpack-dev-server包 老规矩先安装webpack-dev-server npm install -D webpack-dev-server 安装完毕后，修改webpack.config.js文件 完整代.
webpack 之 webpack5 webpack-dev-server 版本兼容问题
shenjing_Shining的博客
11-11 4331
在写
webpack 5 与 webpack-dev-server 3兼容性问题
xm1037782843的博客
06-28 808
说明：这里使用的是webpack: "^5.9.0",webpack-cli: "^4.2.0",webpack-dev-server: "^3.11.0" 问题： 通过 webpack-dev-server 启动项目失败，报错：Error: Cannot find module 'webpack-cli/bin/config-yargs' 解决办法： 使用webpack serve --open命令启动，这里需要注意，执行后会提示缺少打开对象, 所以在ope...
webpack-dev-server打包出错：版本冲突
m0_49850836的博客
11-03 544
我也是一个初学者，照着视频敲的代码 当运行到webpack-dev-server的时候出错，但通过webpack打包（不用自动打包工具）却可以成功打包，于是我找了一些方法，照着改了 webpack和webpack-dev-server的版本（没有改webpack-cli的版本）试过很多不同的版本都不行，最后我回去看视频，看了一个大佬的弹幕：“webpack webpack-cli webpcak-dev-server这三个的版本最好跟视频一样，不然打包不了”；然后我就翻前面几集的视频，找了一下视频中的版.
webpack5 - 之 生产环境的优化（dist压缩包、copy静态资源、缓存、代码切片、多线程打包、抽离重复代码 与 最小化 entry chunk）
weixin_43845137的博客
09-02 870
webpack5 - 之 生产环境的优化（dist压缩包、copy静态资源、缓存、代码切片、多线程打包、抽离重复代码 与 最小化 entry chunk）
vue项目中的webpack-dev-sever配置方法
08-28
在Vue.js项目开发中，`webpack-dev-server` 是一个至关重要的工具，它提供了一个热重载、自动刷新和实时编译的功能，极大地提高了开发效率。本文将详细介绍如何配置`webpack-dev-server`，以便在Vue项目中实现外部...
webpack-使用webpack-dev-middleware.rar
04-12
Webpack 是一个流行的模块打包工具，常用于前端开发，它能够将 JavaScript、CSS、图片等静态资源打包成优化过的单一或多个文件，以便于在浏览器中高效加载和运行。`webpack-dev-middleware` 是 Webpack 提供的一个...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 ...你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与
react项目实践之webpack-dev-serve
10-18
在React项目开发过程中，`webpack-dev-server`是一个不可或缺的工具，它提供了高效且便捷的本地开发环境。这个工具不仅作为一个小型的静态文件服务器，而且具备实时刷新和模块热替换（Hot Module Replacement，简称...
webpack4:webpack4自定义配置尝鲜
05-08
webpack4项目脚手架从零开始写 前言 webpack4出来也有一段时间了，之前的项目还一直用的是webpack2版本。由于工作太忙，也没有时间去熟悉v3版本的特点与优势。这次所以从4开始重新学习一下webpack的基础配置项以及最新的插件都能干些什么？ 所用到的插件 |-- babel // 这个几乎是必装的，浏览器识别ES6就全靠它了 |-- html-webpack-plugin // 强大的html处理器，没有不用的理由。可以生成模板，给链接添加缓存，压缩... |-- extract-text-webpack-plugin // 有了它，我们就可以分离项目中的css，用link的形式来导入到页面中 |-- optimize-css-assets-webpack-p
webpack5 + webpack-dev-server
S_SL_rule的博客
11-27 478
学习webpack中出这种错误： internal/modules/cjs/loader.js:834 throw err; ^ Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack: 原因在于webpack-cli升级到4之后，文件结构发生了变化，会与webpack-dev-server@3.*.*产生不兼容的现象，而如果将webpack-cli版本降下来之后又会导致webpack5打包出bug。 .
webpack4升级一路填坑记(vue-cli新建的工程)
weixin_34034261的博客
12-19 907
2019独角兽企业重金招聘Python工程师标准>>> ...
webpack实时重新加载 webpack-dev-server
weixin_45441173的博客
03-01 809
webpack实时重新加载 webpack-dev-server
webpack5跑webpack-dev-server的时候报错Error: Automatic publicPath is not supported in this browser的解决方案
YanGo的博客
10-27 1687
最近跟着B站大佬视频学习webpack5手动配置webpack构建工具，遇到了这个问题。 问题描述： 在使用webpack-dev-server本地服务的时候，则报错Error: Automatic publicPath is not supported in this browser，如下图 各个工具版本 webpack @5.1.3 webpack-cli @4.0.0 node @10.11.0 报错原因分析: 首先我webpack打包出来后运行的html没有报错的。然后当我修改url-load
解决webpack5下使用webpack-dev-server报错
peter_hzq的博客
11-13 5595
先说下我使用的版本 "webpack": "^5.4.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" 使用 npx webpack-dev-server 运行会报Error: Cannot find module 'webpack-cli/bin/config-yargs'这样的错误。 解决方法一： webpack-cli的版本降为3.3.12 解决方法二： 使用npx webpack serve这个命令运行。 ...
Webpack5 - 开发服务器 webpack-dev-server
xuanwuziyou的专栏
12-27 3124
一.Webpack5 - 开发服务器的作用 二.Webpack5 - 开发服务器安装和使用 三.开发服务器配置
vue-cli webpack 项目版本升级
weixin_33881140的博客
03-25 5857
包含 webpack@4 和 babel-loader@8 以及打包部分优化 一键升级package.json 文件 依赖版本数 手动去修改dependencies中各个包的版本号太慢， so 借助了npm-check-updates工具，一键将package.json中的依赖包版本号更新为最新版本。 1、global install npm install -g npm-check-upda...
webpack5 静态资源管理 devServer static使用和copy-webpack-plugin区别
weixin_44680009的博客
10-22 1910
webpack5 静态资源管理 devServer static使用和copy-webpack-plugin区别
webpack3.6.0 Cannot find module 'D:\桌面\项目\webpack-dev-server\bin\webpack-dev-server.js'
最新发布
04-11
webpack是一个现代的JavaScript应用程序的静态模块打包工具。它主要用于将多个模块打包成一个或多个bundle文件，以便在浏览器中加载。webpack-dev-server是webpack的一个插件，用于在开发过程中提供一个简单的开发服务器。 根据你提供的错误信息，"Cannot find module 'D:\桌面\项目\webpack-dev-server\bin\webpack-dev-server.js'"，这个错误通常表示webpack-dev-server模块没有正确安装或者路径配置有误。 解决这个问题的方法有以下几种： 1. 确保你已经正确安装了webpack-dev-server模块。可以使用以下命令进行安装： ``` npm install webpack-dev-server@3.6.0 -g ``` 如果已经安装过了，可以尝试重新安装一次。 2. 检查你的项目中是否存在webpack-dev-server模块的依赖项。可以在项目根目录下的package.json文件中查看dependencies或devDependencies字段，确保其中包含了webpack-dev-server模块，并且版本号与你使用的版本一致。 3. 检查你的webpack配置文件中是否正确引入了webpack-dev-server模块。可以在webpack.config.js文件中查找是否存在类似以下代码： ``` const webpackDevServer = require('webpack-dev-server'); ``` 如果以上方法都没有解决问题，可以尝试重新安装webpack和webpack-dev-server模块，并确保路径配置正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值