webpack踩坑

最新推荐文章于 2023-03-31 22:25:37 发布
最新推荐文章于 2023-03-31 22:25:37 发布
阅读量327 收藏
点赞数
分类专栏： webpack 文章标签： webpack node.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45942606/article/details/122187150
版权

一、使用devServer报错及解决问题
报错1
在这里插入图片描述
解决：八成是webpack和html-webpack-plugin版本兼容性问题
在这里插入图片描述
报错2：明明webpack -v能显示版本号
在这里插入图片描述
解决：npm install --save-dev webpack@4.43.0

报错3
在这里插入图片描述
解决：降低html-loader的版本
在这里插入图片描述
二、后面会产生一系列的css、less版本问题，下面是我借鉴别人兼容性较好的没报错的版本号!
在这里插入图片描述

@少年啊
关注
专栏目录
webpack踩坑五：js处理
i'm cool 的博客
05-08 296
一：js代码检查 使用eslint来检查js代码，需要安装eslint和eslint-loader,eslint的规则配置使用airbnb规则，而使用它需要安装eslint-config-airbnb-base、eslint-plugin-import 然后在package.json中配置eslintConfig选项 最后在webpack.config.js中配置eslint检查 首先要排除掉node_modules文件夹下的所有文件，防止eslint检查，在选项里面配置fix:true，表示检查到的
react项目配置webpack踩坑之路
qq_40619263的博客
01-13 2770
踩坑一： 博主这个小菜鸟，在学习react配置webpack时，随便找了网上一个帖子，先附上博主看的链接吧。创建react项目并配置webpack 但是，这个
npm安装软件：ERESOLVE unable to resolve dependency tree
最新发布
青梅煮酒
03-31 1481
在安装项目依赖时，很大可能会遇到安装不成功的问题，其中有一个很大的原因，可能就是因为你的npm版本导致的。
webpack4.x安装配置一
08-14 141
1，若是之前反复安装卸载webpack和webpack-cli，一直出现： 　　　　　　　　bash : webpack :command not found 最好的办法就是去这个路径下把这几个文件直接删掉，以及这个路径下把这两个文件夹直接删掉，不要再各种install，uninstall了，这样最完整直接，亲测有效。 然后： npm install -g webpack 　　　...
webpack4 正确的配置方式
weixin_33836223的博客
10-23 388
原文转载于 www.rails365.net 原文: A tale of Webpack 4 and how to finally configure it in the right way 基本构建 开始新的项目 mkdir webpack-4-tutorial cd webpack-4-tutorial npm init 复制代码上下会初始化一个项目，接下来添加webpack4. npm i...
webpack——开发(五)
qq_20464593的博客
05-24 508
1.使用 source map 当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。 为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于
webpack4.+ 学习一（基本配置）
假装是个web dog
07-01 489
起步 保证当期电脑已经安装node、npm (没有的话自行安装) 先新建一个文件夹（名字随便，我这里是）webpack-demo，初始化npm, 先全局安装webpack（因为我用到了webpack命令），然后在本地安装webpack、webpack cli （当然你可以命令行工具或者是编辑器的终端）// 创建文件夹 (当然你也可以自行创建) mkdir webpack-demo // 进入当前文件夹 cd webpack-demo // 初始化 ，加上-y 自动配置，当然你可以 npm in
webpack踩坑之路图片的路径与打包
08-29
Webpack 图片路径与打包 在 Webpack 中，图片的路径与打包是一个常见的问题，尤其是在初学者刚开始使用 Webpack 时。图片的引用方式有多种，包括 HTML 文件中的 img 标签、CSS 文件中的背景图设置、JavaScript 文件...
[Webpack 踩坑] 使用 Webpack 打包 Web 端和 Node 服务端通用的依赖库
palerock的博客
10-23 2135
[Webpack 踩坑] 使用 Webpack 打包 Web 端和 Node 服务端通用的依赖库 引言 最近准备着手将大学时写的一个框架给规范化，想着将它部署成 NPM 上的一个 Package，但遇到了两个问题： 这个框架完全是由 ES5 语法规范搭建的，也没有考虑模块依赖什么的，它本身依赖的其它库都是纯代码复制到项目文件内容的上方，所以我们应该需要使用模块化来引用其依赖的框架，如 ES5 的 require 如果使用了 require 语法，那么意味着所有想使用该框架的项目都必须使用 NPM，该框架的
【Webpack】Webpack踩坑，初次安装版本不合适问题
Jayant89的博客
05-30 6134
初次安装webpack进行项目打包时，按照安装语句：npm install webpack -g默认进行了版本安装，但初次接触，由于webpack4.0以上版本，已经分离了webpack-cli ,所以目前，无论是学习还是开发项目，我们可以先选择之前较为稳定的版本。所以不清楚详细情况的同时，当你选择webpack -v查看是否成功安装时，会提示你需要安装webpack-cli并且在按照提示安装之后...
webpack4配置demo
12-18
通过webpack4搭建开发环境，适合入门，笔记和搭建流程都在里面
[转] 那些在使用webpack时踩过的坑
weixin_34357887的博客
04-25 1965
用webpack的过程，就是一个不断入坑和出坑的过程。回望来时路，一路都是坑啊！现把曾经趟过的那些坑整理出来，各位看官有福了~ 文章末尾有我用到的依赖的版本信息，若你发现某个问题与我在本文中的描述不一致时，可以看看是否版本与我所使用的不同所致。 一、Mac平台和Windows平台的差异导致的问题 1、路径上的差异 在配置entry选项的时候，我这么配置： entry: { ...
webpack4配置vue环境和一些小坑。
热门推荐
simoon's的博客
06-08 2万+
第一步： npm init npm install webpack vue vue-loader css-loader vue-template-compiler 第二步： 创建文件： src–>app.vue，代码如下： <template> &amp
npm install 失败啦？
zic_liu的博客
07-12 3624
背景 在项目目录下清除 node_modules 文件夹和 package-lock.json 文件后， npm i ，报错了： npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: webpack@5.11.1 npm ERR! node_modules/webpack npm ERR! dev webpack@"4.41.5" from the ro
win10下，webpack创建vue项目
Coder.Monkey的工作簿
08-03 1518
创建vue项目，就我目前学习了以下3中方案，各有特点。 第一种是之前的文章就讲过的vue-cli创建vue项目，参考：https://blog.csdn.net/justflow/article/details/109273620 第二种是vue-cli 创建webpack模版的vue项目，基本和上面的方式相同，就是起始命令有点差异 # vue init webpack project-name 以上两种基本都是基于vue的脚手架vue-cli来实现项目创建的。 第三种就是完全和vue-cli无
webpack安装使用 4.x
LGDmar的博客
06-05 372
众所周知webpack是一款打包项目的打包工具 本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。 安装webpack之前请确保你已安装了node.js 如果没有安装请点击下载安装:官网下载安装地址 webpack四个核心概念： 入口entry 出口..
webpack4.43.0安装babel-loader步骤
weixin_43410491的博客
06-09 2217
运行打包时报错如下： webpack version：4.43.0 由于在webpack中默认只能处理部分ES6的语法，要借助第三方loader来帮助webpack将高级的语法转换成低级的语法 首先要安装的三个：**babel-loader、babel-core、babel-preset-env 1）安装babel-loader（不要把babel打成bable！！！！！！） npm i babel-loader -D 2）安装babel-core npm install -D babel-core
使用webpack4.43.0+vue2.6.12手动搭建一个webpack项目
MrDeng_web2018的博客
02-14 1628
webpack4.43.0的基础配置&高级配置 说到搭建一个vue项目，对于一个初级工程师来说最简单也是最快的方法就是使用vue-cli脚手架来搭建，当然搭建项目对于一线前端初级开发工程师来说是接触不到的，这些工作前端leader都已经做好了，你只需要往里面写业务逻辑即可，看上去没啥毛病，但对于有追求，有上进心的你来说，你也想知道一个项目在破土动工前，前端leader是怎么搭建一个前端项目的工作流的，如何去手动配置一个具体项目的webpack打包文件，包括后期的SSR，服务端渲染。这些都是你提升自己
webpack3升级为webpack4的实践
高先生的猫
06-08 2076
之前尝试过一些在webpack3的基础上做的构建优化，例如引入HappyPack优化构建速度，开启loader缓存和优化包查找路径等等，详情可以查看前端webpack构建优化 但是随着时间的推移，这种优化产生的效果越来越弱化，手上的项目体积越来越大，对本地开发热更新速度和生产打包发布速度都有了很大的影响。 webpack3升级到webpack4迫在眉睫，这篇博文将记录一些我在升级过程中遇到的坑。 当你遇到这些坑时，通过搜索引擎找到我这篇文章，如果能够解决了手上的webpack配置问题，然后发自内心的感
webpack3升级到webpack4踩坑经历与解决方案
本文讲述了作者从webpack3升级到webpack4的踩坑经历，涉及到webpack-cli的安装、依赖项的调整、错误解决等多个方面，旨在为读者提供一个详细的升级指南。 一、webpack-cli的安装 在升级到webpack4之前，需要先安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值