魔乐社区

魔乐社区

社区官网工具模型库数据集体验空间

去全站搜索看看？

登录社区云

登录社区云，与社区用户共同成长

魔乐社区

邀请您加入社区

欢迎加入社区

欢迎加入社区

webpack

关于使用filemanager-webpack-plugin插件时遇到的问题

1.将filemanager-webpack-plugin配置在piugins中打包时会报错，说onEnd是一个未知的属性。2.在配置后启动项目，如果在没有打包的情况下项目会报错并且终止运行

 BarryKerrigan
2023-03-14 16:02:33

 1670

#webpack #vue.js #javascript
vue项目使用webpack打包部署后,图片不显示，查看控制台也没有报错。

错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置。// limit: 10000,（注释掉就好了）

稚儿擎瓜.细犬逐蝶
2024-11-13 13:46:37

 412

#vue.js #webpack #前端
【解决webpack-dev-server 动态配置代理问题】

在常规开发中，基本上都会有好几套环境，开发环境dev.com,测试环境test.com。我们在对接不同的环境联调的时候，一般是通过切换target，来实现连接不同的环境。然而，总是需要切换不同的域名，或者与多个后端同事协同开发的时候，经常切换target，那就得经常重启服务，这就让人很难受了

 Z_huade
2022-04-25 19:07:09

 6402

 3

#javascript #typescript #webpack +2
webpack处理js兼容性问题之core-js

core-js是一个JavaScript库，提供了许多ES5、ES6和其他新特性的polyfills，以确保这些新特性在旧浏览器上的兼容性。polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。它的主要用途是为了确保Web应用程序在所有浏览器中都能运行，并提高代码的可移植性和可维护性。举个例子，ES6引入了一个新的数据结构Map，但是

 jieyucx
2023-06-18 15:25:04

 5529

 3

#javascript #webpack #前端
antD vue backTop 组件运用

不生效是因为 target 默认指向window 所以在vue项目中要修改指向

 whn1231
2021-11-24 09:43:40

 2153

 2

#webpack #javascript #前端
【opencv】示例-videocapture_openni.cpp 深度数据获取和处理的示例

该代码是一个与使用OpenCV进行深度传感器捕获和处理相关的程序的一部分。主要功能包括处理Kinect或XtionPRO等深度传感器数据，解析命令行参数，打开视频捕获设备，以及在GUI上显示深度图，彩色图像，和红外图像等。代码中使用了OpenCV库函数进行视频捕获和图像处理。// 包含OpenCV库中处理视频的头文件#include "opencv2/videoio/videoio.hpp"/..

十年一梦实验室
2024-04-14 14:56:00

 521

 1

#opencv #webpack #人工智能 +2
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包

vue 项目打包后浏览器 F12 在source 下不显示 webpack 包

 weixin_45825313
2022-06-10 09:29:48

 2336

#vue.js #webpack #javascript
Vue基础技术 webpack-dev-server的配置和使用_loglevel webpack-dev-server(1)

它是给我们的webpack在编译的过程当中以及在我们的页面上和我们自己编写的js代码的时候，如果想要去判断当前项目的环境，我们都可以通过调用process.env.NODE_ENV来获取环境信息进行逻辑判断，也就是说在这里面定义的变量信息在我们编写的代码中是可以引用到的。我们可以借助一个webpack包cross-env这个包，为什么要使用这个包呢？因为不同平台上我们设置环境变量的方式是不一样的，

2401_84434880
2024-04-29 13:37:26

 483

 5

#vue.js #webpack #前端
去掉webpack脚手架构建的vue项目中的eslint检查

eslint是一个语法格式检测的工具，对于规范开发有好处，培养严格的书写习惯，但是对于新手来说，非常的痛苦，有时候没有语法错误，仅仅是格式中tab,space区分不严格或者少了一个space，多了两个space，就会报错，甚至编译不过，出现警告，很烦人。相信大家可能都遇到过如下所示的警告：Unexpected tab characterMixed spaces and tabsTrailing s

luffy5459
2020-08-13 17:09:25

 2326

 2

#webpack
前端优化，webpack打包删除无用文件并批量删除文件脚本

前端优化 webpack打包时删除无用文件并批量删除文件脚本

 liminla!
2024-03-01 15:17:11

 591

 1

#前端 #webpack #node.js
webpack和vite的区别？（学习笔记）

Webpack与Vite作为现代前端开发中的两种主流构建工具，它们在多个方面存在显著的差异。

qq_48076747
2024-09-06 16:13:05

 2970

 6

#webpack #前端 #node.js +2
CommonsChunkPlugin 插件使用方法、出现报错： Error: webpack.optimize.CommonsChunkPlugin has been removed,

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.按照webpack 官网文档操作是不是有以上报错？解决方法：plugins: [new CleanWebpackPlugin(),new Htm...

IS_LeQian
2020-04-15 14:22:36

 1463

 2

#vue.js #webpack #前端
前端性能优化：Webpack配置与优化

1.背景介绍前端性能优化是现代网站和应用程序开发的一个关键方面。随着互联网的普及和用户对网站性能的要求越来越高，前端开发人员需要不断优化和提高网站的性能。Webpack是一个现代JavaScript应用程序的模块打包工具。它可以帮助开发人员将代码组织成有意义的模块，并将其打包为可以在浏览器中运行的文件。在这篇文章中，我们将讨论Webpack的性能优化，以及如何使用Webpack来提高前端应用程..

禅与计算机程序设计艺术
2024-01-08 01:31:01

 1055

 18

#前端 #性能优化 #webpack +1
webpack打包将public目录下的文件复制在打包后的build目录中

webpack打包将public目录下的文件复制在打包后的build目录中copy-webpack-plugin插件作用是在用webpack进行打包代码时，可以将指定目录下的文件原样复制到另一个指定目录下【默认是打包后的目录下】。

不吃西红柿w
2022-11-02 10:22:35

 4591

 1

#webpack #前端 #javascript
vue打包报错basedir=$(dirname “$(echo “$0“ | sed -e ‘s,\\,/,g‘)“)

PS C:\Users\aiyong\Documents\GitHub\itr\itr-btit-fe-adminpc> yarn buildyarn run v1.22.10$ node --max_old_space_size=4096 node_modules/.bin/vue-cli-service buildC:\Users\aiyong\Documents\GitHub\itr\

蓝枫秋千
2022-05-04 14:35:10

 2693

 2

#vue.js #webpack #npm
前端打包工具rollup、webpack、vite的区别

前端打包工具rollup和webpack的区别文章目录前端打包工具rollup和webpack的区别一、结论二、rollup三、webpack一、结论rollup更适合打包库，webpack更适合打包项目。rollup基于esm打包，打包生成的文件更小。（识别commonJs需要插件）rollup原生支持tree-shaking，webpack2开始支持且消除效果不好。（去除未使用代码）webpa

_会飞的肥牛
2022-02-13 21:09:26

 5553

#webpack #前端 #node.js
webpack的使用——基础篇

一、Webpack 简介1.1 webpack 是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2 webpack 五个核心概念1.2.1 Entry入口(E

1oneLee
2021-02-23 13:32:10

 627

 1

#webpack #前端 #javascript
利用 terser-webpack-plugin 去除生产包中的console

使用terser-webpack-plugin去除代码中的console.log

PQ℡
2022-02-08 09:52:00

 4316

 1

#webpack #javascript #前端
webpack中ts编译加兼容性转换：swc对比babel+tsc，附示例代码

使用babel或swc配置typescript代码的编译并处理为兼容低版本浏览器的js代码，并对比它们的表现。

小龟壳@greaclar
2023-06-12 23:45:27

 3782

 3

#webpack #javascript #前端 +1
项目性能优化之用compression-webpack-plugin插件开启gzip压缩

背景：vue项目打包发布后，部分js、css文件体积较大导致页面卡顿，于是使用webpack插件compression-webpack-plugin开启gzip压缩。

weixin_42254016
2024-01-26 15:55:01

 1692

 8

#性能优化 #webpack #前端
vue项目打包，使用externals抽离公共的第三方库

vue项目打包，配置externals

UzumakiHan
2023-10-13 12:03:20

 1273

#vue.js #webpack
vue项目使用webpack打包后部署到服务中无法读取静态资源

在打包vue项目时，因为通过脚手架生成的项目，部署到服务中会出现读取静态资源404的情况

 followly
2023-12-11 17:18:37

 2533

#vue.js #webpack #前端
vue+cesium项目搭建

3.在项目文件夹下新建vue.config.js文件，添加以下内容。使用vscode打开项目，在控制台输入(以1.80.0为例)参考：http://t.csdn.cn/i0AuP。2.修改main.js文件，添加以下内容。1.引入cesium库。

xiaociweiha
2023-04-18 17:21:45

 775

 1

#vue.js #webpack #javascript
前端项目开发构建速度很慢？别急躁！

在日常的开发中，经常会遇到项目代码体积越来越大，在开发过程经常卡慢，这对于我们前端调试样式其实是很考验心态的，下面给大家分享一下如何给vue-cli项目提高开发过程的构建速度。

C猿”
2024-05-29 17:46:25

 1069

 8

#前端 #webpack #express
使用swc与esbuild闪电加速你的webpack打包链路

前言直入正题，自动 umi mfsu 和 vite unbundle 打响 FE 高效开发第一枪，淘系 rax 新增 swc 功能、swc 作者加入 vercel 麾下，nextjs 新版本默认 swc 打包，再到阿里 ice2 新增 swc + esbuild 链路支持，swc 和 esbuild 逐渐入侵 FE 主工具流，暗示了一统天下的预兆。Rust 和 Go 将成为未来 JavaScrip

Sakina
2021-11-15 23:27:21

 9453

 4

#webpack
Vue项目ERROR：Cannot find module webpack.dev.conf.js

如果没有，则将该文件导入，然后重新启动命令即可。

孤独的狼~
2022-12-12 11:41:02

 2662

 1

#webpack #vue.js #javascript
如何使用 Webpack 打包和优化前端项目？

通过以上步骤和优化策略，可以高效地管理和优化前端项目，提高开发效率和应用性能。Webpack 是前端开发的重要工具，掌握其基本用法和实战技巧，能够更好地应对复杂的前端项目需求。如果需要进一步自定义 Babel 的行为，可以在.babelrc文件中添加更多配置项。使用自动注入核心模块：指定目标浏览器范围：这些配置可以帮助确保代码兼容性。通过上述步骤，您可以轻松地在 Webpack 中配置最新的 Ba

破碎的天堂鸟
2025-02-04 08:17:18

 1777

 22

#前端 #webpack #node.js
webpack使用gzip 压缩文件

目的：打包体积过大时，提升web传输性能，使浏览器不卡顿前端对css/js 打包压缩，后端nginx 也打包压缩，这样节省服务性能，在浏览器传输时，服务端没有找到.gz 文件才进行压缩，而不至于每次都压缩，消耗性能。

rainbow8590
2023-05-30 16:14:15

 1519

#webpack
vue如何动态加载显示本地图片资源

vue如何动态加载显示本地图片资源

 喜欢躺平的程序员姐姐
2024-02-21 17:50:50

 1739

 2

#vue.js #前端 #javascript +1
webpack性能优化篇

webpack性能优化篇

 dralexsanderl
2022-02-27 16:02:09

 2964

 1

#webpack #性能优化 #前端
webpack配置自定义文件打包名称

[hash] 指的是匹配文件的名字 [hash:10] 指的是问得名字长度为10[ext] 也就代表字符 '.'[query] 路径后面的参数//给图片设置导出的文件夹及名字rules:[{ test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource' ,generator:{filename: 'images/[hash:8][ext][11

wjy_0214
2024-07-18 15:37:28

 546

 3

#哈希算法 #webpack #算法
配置webpack 设置不打包文件，实现配置文件修改不重复打包，亲测好用

配置webpack 设置不打包文件，实现配置文件修改不重复打包，亲测好用

 奔跑裸熊
2022-09-22 11:02:43

 2936

#webpack #前端 #node.js
震撼！微前端在TMD的落地实践与突破

微前端是一个设计理念，不是一个库或者框架微前端的概念由 thoughtworks 在 2016 年提出。其核心思路是借鉴后端微服务架构思想，将一个庞大的巨石前端应用拆分为多个简单独立的前端工程。每个前端工程可以独立开发、测试、部署。最终再由一个主应用应用将所有子应用合并到一起，以一个完整的网站形式展现给用户。简单来说，微前端【一拆一合】，拆的是复杂度、合的是视图和子应用之间的通用能力！独立开发、降

 humorHan
2025-01-05 23:33:06

 1648

 25

#前端 #状态模式 #vue.js +1
《webpack5 实战三》之html打包

前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。webpack实战系列专栏webpack实战源码webpack官网文档目标和过程分解目标：将打包的js资源自动引用到html 文件使用html-webpack-plugin 插件做该功能步骤：webpack.

星宇大前端
2021-04-09 17:43:47

 635

#webpack
webpack-devtool

作用：webpack会将js代码进行压缩打包，loader也会处理相应代码，打包后代码很难进行查看，这也使得开发人员调试时很难找到对应代码位置。此时可采用devtool，通过资源地图的方式，给出打包后代码到原始代码的映射，方便开发人员调试。要点：webpack官方给出了多种模式，模式间主要区别以及应用场景已经给出，下面是主要参考参数参数名参数描述参数值devtool可以使用的devtool根据基础

 问丶心
2022-02-27 00:45:39

 870

#webpack #前端 #javascript
webpack HtmlWebpackPlugin报错 TypeError: The ‘compilation‘ argument must be an instance of Compilation

webpack HtmlWebpackPlugin报错TypeError: The 'compilation' argument must be an instance of Compilation，webpack5和html-webpack-plugin的版本兼容问题

 前端小白的逆袭
2020-11-24 15:56:51

 3276

 13

#webpack #前端
【webpack】webpack的html-webpack-plugin中的title不起作用？（已解决）

【代码】【webpack】webpack的html-webpack-plugin中的title不起作用？（已解决）

新生代农民工官方认证码农小拽
2023-04-01 22:49:23

 914

 2

#webpack #html #前端
webpack4手动搭建Vue项目

学习总结1. 多看看webpack官网2. webpack的作用：配置一堆东西，达到运行程序的目的3. 无论什么东西都转成js，然后插入到一个空空的html文件中运行4. webpack就是个管理者，管理着一堆loader，一堆loader的作用就是把自己负责的东西弄成js。

YUELEI118
2024-08-29 16:21:36

 1676

 21

#vue.js #前端 #webpack
python3 -m http.server 检查打包前端的项目

这是 Python 提供的一个内置的简单 HTTP 服务器。当你在终端中运行 python3 -m http.server 命令时(在对应的打包目录比如dist目录)，Python 会启动一个 HTTP 服务器，它会将当前工作目录下的文件作为静态文件提供给浏览器。例如，如果你在命令行中运行了 python3 -m http.server，然后打开浏览器并输入 http://localhost:80

蓝莓味柯基
2024-06-06 20:18:04

 865

 2

#http #webpack #react.js
webpack5 babel箭头函数不转普通函数

学习webpack5发现babel的智能预设无法将箭头函数转换为普通函数，这时候需要在webpack.config.js 中。这时候再打包，箭头函数就会转换为普通函数。output 中加入配置。

御风轻羽
2023-02-13 22:26:50

 720

 1

#webpack
vue 项目中使用 jsx webpack 配置支持 jsx 文件

vue 项目中使用.jsx 文件，配置 webpack支持.jsx

ziyi813
2022-08-06 15:24:35

 2768

#vue.js #webpack #javascript
webpack打包报错：Invalid configuration object. Webpack has been initialized using a configuration……

报错内容：注意看报错提示中有：configuration.module.rules should be an array:也就是rules应该是一个数组。回到代码，看rules的配置：将rules改成数组即可，如下：此时在运行webpack就没有报错了

 依米__
2021-01-30 10:58:20

 7694

 5

#webpack #npm
webpack使用url-loader时，显示cant find “file-loader”。这里轻松解决！

webpack使用url-loader时，显示cant find “file-loader”办法：更改图中的limit值，如你使用是图片是36kb，就设置37*1024即可。如下图。

朕爱偷菜
2020-11-01 21:22:59

 626

#javascript #vue.js #webpack +1
webpack4+升级到webpack5+的变化

webpack4+升级到webpack5+的变化css-minimizer-webpack-plugin替换optimize-css-assets-webpack-pluginFor webpack v5 or above please use css-minimizer-webpack-plugin instead.webpack-merge 引入方式// 4.+const merge = re

kiscon
2021-10-28 16:40:19

 899

 1

#webpack #javascript #前端
使用webpack5打包之后，打包文件默认输出形式是箭头函数，使用babel转也不行

也感谢一个前端同行发现的问题，之前我用webpack4.x 在ie上做了兼容性的配置后来 webpack更新到5 之后我那个配置就不行了webpack5.x 打包之后文件还是箭头函数导致ie上还是不行哪怕用babel 转 core-js 也不行两个选择1. 要不将你的版本降低到 4.x算是一个解决方法吧2. 把箭头函数关闭掉environment: {arrowFunction: fals

yunchong_zhao
2021-04-15 16:32:31

 2617

 7

#webpack
webpack之output.libraryTarget测试

学习链接【webpack系列】webpack打包组件和基础库核心library的值被如何使用，会根据libraryTarget的取值不同而不同。libraryTarget配置的作用是控制 webpack 打包的内容是如何暴露的配置

 weixin_41837346
2021-02-17 12:01:34

 971

#webpack
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

运行vue项目报错：npm run dev原因:webpack-dev-server版本和vue版本不一样，需要将webpack-dev-server/vue卸载了，安装对应版本解决方法：1 、查看vue版本是 vue -V将vue4.2.3,卸载安装3.3卸载vuenpm uninstall @vue/cli -g安装指定版本vuenpm install @vue/cli@3.3 -g查看vue

IT教程资源
2022-05-03 10:02:43

 677

#webpack #前端 #node.js
执行 npm run build:prod时，报npm ERR! While resolving: eladmin-web@2.6.0npm ERR! Found: webpack@4.46.0

这个错误很可能是由于你的 npm 缓存中的一些文件与当前项目不兼容导致的。执行 npm run build:prod时，报。

超级大超越
2023-08-29 12:09:48

 1410

 1

#前端 #npm #webpack
[已解决]webpack异常：Uncaught ReferenceError: regeneratorRuntime is not defined

错误如下：原因分析：在程序中使用了 async/await ，经过@babel/preset-env 解析后会将代码转换为一个名为regeneratorRuntime的函数，但是转换后的代码仅仅存在这个函数的调用，并没有具体的定义体现。解决方案：1、安装@babel/polyfillcnpm install @babel/polyfill -D2、入口文件引入@babel/polyfillimpo

张培跃吧
2020-08-24 10:48:42

 3286

 4

#webpack #javascript
webpack打包设置小图片自动转换base6

webpack打包设置小图片自动转换base6

xiaxia0705
2023-03-07 11:50:37

 1888

#webpack #前端 #node.js

加载更多

回到
顶部

提供社区服务与技术支持

提供社区服务与技术支持

©1999-2023北京创新乐知网络技术有限公司京ICP备19004658号