使用webpack遇到的一些坑

最新推荐文章于 2022-07-09 12:22:29 发布
最新推荐文章于 2022-07-09 12:22:29 发布
阅读量871 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012148262/article/details/80312885
版权

首先，点击率很高的“学习webpack看这一篇就够了”，个人建议还是算了。。。云里雾里的，条理很不清晰，不如直接看官方guide。


我参考的是一篇rails365的文章：https://www.rails365.net/articles/webpack-3-ling-ji-chu-ru-men-jiao-cheng-3-shi-xian-hello-world


条理清晰很多，但是无奈技术更新快，有些地方还是行不通。比如到了最后打包运行的这步：就会提示没有webpack-cli

，上网查了一堆资料，各种方法都试了，最后发现比较合理的方法：


用新的打包命令：npx webpack

下面是官方的说明：



折腾半天。。还是官方文档靠谱。。。




Johnsno
关注
webpack5 Core-js解决async 函数、promise 对象等兼容问题
周家大小姐
11-17 1472
它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法（includes）等，它没办法处理。过去我们使用 babel 对 js 代码进行了兼容性处理，其中使用@babel/preset-env 智能预设来处理兼容性问题。所以此时我们 js 代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。main.js中的core-js注释。
升级webpack5过程中遇到的坑
LYFlied的博客
02-04 2715
将项目的weback从3升到了5，遇到了一系列的问题，这里记录两个： extract-text-webpack-plugin兼容问题 webpack-dev-server兼容问题 1.extract-text-webpack-plugin兼容问题 升到webpack5后，运行打包直接报错，如下： 原因是：webpack4以上的版本不再使用“extract-text-webpack-plugin”，应该改成用“mini-css-extract-plugin” 解决 原代码： const ExtractT
webpack4.*使用中遇到的一些坑
LQ961027632的博客
06-10 224
webpack4.*安装中的坑 1.webpack4.x的命令行工具被单独分离出来，需要单独安装webpack-cli 2.当使用命令 webpack .\src\main.js .\dist\bundle.js时 webpack报错：ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can't resolve '.\dist\bundle.js' in 'F:\webpack-study' @ multi ./sr
关于webpack踩的那些坑
weixin_57145577的博客
04-17 224
Error: Cannot find module 'webpack-cli/bin/config-yargs’解决方案 运行npm run dev遇到的问题：Error: Cannot find module 'webpack-cli/bin/config-yargs’ 原本package.json配置文件： "devDependencies": { "webpack": "^5.33.2", "webpack-cli": "^4.n.n", "webpack-dev-server
webpack学习坑点笔记
jser修仙之路
04-28 180
按照网上教程在未做配置情况下运行webpack打包出现以下错误： ERROR in multi ./hello.js hello.bundle.js Module not found: Error: Can't resolve 'hello.bundle.js' in 'F:\AnderWork\webpack工具参考\hello' @ multi ./hello.js hello.bun...
webpack踩坑合集
cecoal的博客
05-06 865
我可能就是个坑王。。 感觉学习webpack时一步一掉坑。 细数我在webpack上踩的那些坑 1、 如果确定命令是正确的，那么很可能没有安装webpack（当时就是只全局安装了webpack-cli没有安webpack） 解决：webpack，webpack-cli都在安装一遍 全局安装npm i webpack –g 指定版本3.0.0：npm i webpack@3.0.0 -g 安装到项......
vue-cli与webpack处理静态资源的方法及webpack打包的坑
08-27
在实际的打包过程中，可能会遇到一些坑，比如构建后页面出现空白或者静态资源加载失败。这可能是因为Webpack的`publicPath`配置问题。默认情况下，Vue-cli的Webpack配置可能设置了一个基于服务器部署的公共路径，如`...
webpack版本的一些坑
最新发布
09-07
但是在使用Webpack的过程中，也会遇到一些坑。以下是一些常见的Webpack版本坑点： 1. 版本兼容性问题：Webpack的不同版本之间可能存在一些差异，使用过程中需要注意版本兼容性问题。如果使用了不兼容的版本，可能会...
使用Webpack/React去打包构建Electron应用
daydream13580130043的博客
07-02 3778
前言 Electron是一个跨平台创建桌面应用程序的框架，允许我们使用HTML/CSS/JS去创建跨平台桌面应用程序。随着大前端的发展，当我们去开发Web UI时，会习惯性的使用Webpack等构建工具以及React等钱的MVVM框架去辅助开发。在开发Electron时也是同理，因此本文将介绍如何使用Webpack/React去打包构建整个Electron应用，并使用Electron-builder构建出App。其实社区提供了很多Electron Webpack的脚手架和模版，比如electron-forg
webpack打包文件不能引用_使用 webpack 打包小程序
weixin_42146888的博客
01-12 364
前言针对目前市面上出现的各种小程序，如百度小程序，支付宝小程序，字节跳动小程序，快手小程序。小程序原生开发对于开发者的开发体验并不是很友好，那如何解决这个问题呢？问题点样式预处理TypeScript支持多环境打包支持可扩展性 如在小程序内支持md文档格式，json格式等多端支持问题如何解决使用webpack 来处理以上一系列问题webpack 官方介绍就是静态文件的打包器上图所做的工作就是 项目中...
[eslint] Unexpected block statement surrounding arrow body; move the returned value immediately afte...
weixin_30681615的博客
01-29 896
[eslint] Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`. [arrow-body-style] 1 res => { 2 3 　　return new Promise().resolve(null); 4 ...
webpack
tcllxxl的博客
10-20 189
webpack可以将模块化文件进行打包，（不适用模块化会有变量冲突等问题）处理成浏览器可以识别的js文件，浏览器不识别common.js es6等模块化语法 1、 首先创建文件夹，添加两个js文件，用模块化方式开发，然后添加html，一般都是在htnl中使用script标签引入js文件，但是模块化之后需要webpack打包，html中引入打包后的js文件 文件目录如下 mathUtils.js function add(num1, num2) { return num1+num2; } functi
webpack5 打包之后还有箭头函数问题
知之为知之，不知为不知
07-09 1189
webpack5 打包之后还有箭头函数问题,修改构建目标 `target`
20.重学webpack——手写babel中的es6中的箭头函数转成es5中的普通函数的插件(了解)
2024路在何方
08-04 1834
【重学webpack系列——webpack5.0】 1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。 从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。 可以点击上方专栏订阅哦。 以下是本节正文： babel能够将es6的大部分语法转换成es5，例如箭头函数转成普通函数等。今天就利用babel的一些库，手写一版箭头函数转换成普通函数，感受下ast语法树的作用。 依赖库介绍（重点） @
【Vue】快乐学习第五篇，webpack，vueCli2，3，箭头函数
很高兴你能看到这里
06-02 995
大家好，我是小周，最近在忙着期末考试，继续写Vue的学习笔记，如果觉得还不错，三连支持博主
webpack配置react项目，无法使用箭头函数
一个前端小白的瞎扯
11-29 3244
今天使用自己配置的webpack做开发的时候，发现不能使用箭头函数，错误原因Unexpected token。 我的.babelrc文件长这样子 在这个文件中，我没有配置stage-0。然而使用箭头函数和stage-0有关，他一定要放在后面。它包含了对ES6以及7的所有支持， 包括那些还没有定下的功能。 解决方案 安装stage-0，执行 npm install --save-dev ba...
ES6折腾记- 箭头函数【Arrow function】要点及脱坑点
CRPER
09-06 9775
ES6的箭头函数的特点：永远是匿名函数，This指向于obj内部；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值