webpack记录（2）

最新推荐文章于 2025-12-28 14:23:49 发布
原创 最新推荐文章于 2025-12-28 14:23:49 发布 · 105 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#node.js

本文详细介绍了Webpack中各种加载器的安装与配置方法，包括scss-loader、css-loader、style-loader等，以及如何使用mini-css-extract-plugin插件抽离CSS代码。同时，文章还涉及了postcss-loader的使用，以及如何通过url-loader和file-loader来打包图片资源。
安装scss-loader

在这里插入图片描述

安装css- loader
安装style- loader

{
	test : /\. (scss|sass)$/,
	loaders : ['css-loader',
}

在这里插入图片描述

将style- loader抽离成组件

use最下最先执行嗷
在这里插入图片描述

插件抽离css代码

mini-css-extract-plugin
在这里插入图片描述
在plugin中配置信息
在这里插入图片描述
更改路径
在这里插入图片描述

编译之前删除代码

在这里插入图片描述
先解构在这里插入图片描述

new CleanWebpackPlugin()
postcss

安装postcss-loader

在这里插入图片描述##### 打包图片
安装url-loader file-loader
在这里插入图片描述
添加前缀
在这里插入图片描述

react

在这里插入图片描述

vue

解析vue
在这里插入图片描述
在这里插入图片描述

装饰器 插件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
有顺序嗷

sheizai
关注
webpack优化vue2实战记录
lzc13902932164的博客
07-07 208
日常工作中对webpack的使用太少，导致对一些编译打包优化相关的知识掌握不是很好。这里起了一个比较简单的vue项目，引入了几个第三方库(lodash,moment,lvzc-ui,element-ui,echarts)。期望通过webpack进行相关配置，能够优化打包速度，打包文件大小，首屏加载等。期望在手动配置的过程中，能够加深对webpack的理解。可以看到，安装相关依赖之后，首次编译，compiled successfully in 16s。运行scripts的serve命令，启动项目。
webpack-gulp-logger:gulp 的 webpack 记录器
05-29
npm install --save webpack-gulp-logger 用法 var gulp = require ( 'gulp' ) ; var webpackConfig = require ( './webpack.config' ) ; var webpackLogger = require ( 'webpack-gulp-logger' ) ; gulp . task ...
webpack学习记录
fangqi20170515的博客
08-08 406
Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。我们将 Webpack 输出的文件叫做bundle。开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。........................
记录webpack2升级至webpack4
wangjunjie_97的博客
01-14 1364
记录webpack2升级至webpack4 1、更新webpack下载webpack-cli node版本要6以上 npm install webpack@4 -D npm install webpack-cli@3 -D 下面这种报错就是插件版本问题 TypeError: Cannot read property 'xxx' of undefined "webpack": "^4.44.2", "webpack-cli": "^3.3.12", 警告暂时没有解决 (node:43802) Deprec
webpack4迁移webpack5记录
qq_41549657的博客
12-19 331
webpack4 到 webpack5 的迁移核心在于依赖版本升级与配置适配，需重点关注废弃配置的替换、Node.js 模块 polyfill 处理及插件兼容性。对于长期使用 webpack4 的项目，迁移后可显著降低维护成本、提升构建效率，同时接入 webpack5 专属特性（如模块联邦实现跨应用资源共享）。webpack5 作为官方迭代的重要版本，相比 webpack4 带来了多项核心优化，包括但不限于：​。webpack5 对配置结构进行了优化，部分配置项被废弃或调整，需按以下规则修改配置文件：​。
Webpack记录
三岁打酱油的博客
11-16 215
Webpack是什么 webpack是一种模块化的打包方法，每一个文件都是一个模块使用id关联。它比grunt/gulp要强大很多，所以在很多项目中已经替代了其他的打包工具。 开始使用Webpack 1、安装(需要先安装node,npm) // 全局安装 (一般选择全局安装) npm install -g webpack // 安装到项目路径 npm install --save-dev web...
webpack跨域问题记录
lianwenxiu的博客
10-28 288
1.可以用webpack模拟数据 index.js let xhr = new XMLHttpRequest(); // http://localhost:8081 webpack-dev-server的服务 -> 3000 xhr.open('GET', '/user', true); xhr.onload = function(){ console.log(xhr.resp...
webpack5使用记录
IT菜鸟
02-16 194
使用webpack-dev-server热加载。
使用webpack报错记录
Vanllen_moon的博客
04-08 680
1.打包html资源时报错：TypeError: Cannot read property ‘thisCompilation’ of undefined at CommonJsChunkFormatPlugin.apply 查阅资料后，经尝试 降低compression-webpack-plugin版本，更新extract-text-webpack-plugin，均无法解决。 经尝试修改版本后得到解决，以下为修改后的版本号： （打开package.json可看到版本号） 执行的命令为： npm i we
webpack常用配置记录
Exclison的博客
01-26 1568
webpack常用配置记录
记录 webpack 相关问题
weixin_46410264的博客
04-26 412
—记录时间：2023-04-26。
详解webpack多页面配置记录
11-29
之前也写过webpack学习记录，项目中需要一个常用的webpack多页面配置，所以才动手，本着能写一行是一行的原则，开始了配置webpack之旅。 定目录结构 首先我只需要开发环境（包含自动更新）和打包环境，初定的目录...
webpack+vue2构建vue项目骨架的方法
08-28
Webpack+Vue2构建Vue项目骨架的方法 本篇文章主要介绍了使用Webpack和Vue2构建Vue项目骨架的方法。通过本篇文章，我们可以了解使用Webpack和Vue2构建一个基本的前后端分离项目的骨架。 一、项目初始化 在开始构建...
使用 cnchar 生成汉字拼音、笔画、组词数据（Node.js 实战教程）
weixin_46244623的博客
12-27 372
本文介绍了使用Node.js和cnchar库生成汉字相关数据的方法，主要包括拼音、笔画数、笔画名称、原始笔画数据和常见组词。通过示例脚本generate_char_data1.js演示了如何获取单字数据并导出为JSON格式，适用于汉字学习类项目的数据预处理。文章强调cnchar适合数据预生成，Node.js适合处理汉字数据工具脚本，建议后端仅负责存储，前端负责交互与动画实现。注意事项指出笔画数可靠但笔画名称仅适合基础展示，教学级笔顺动画推荐使用HanziWriter。
Node.js 全栈攻略：基于天远数据 API 开发即时身份核验中间件
2501_94042197的博客
12-26 554
本文介绍了如何使用Node.js对接天远数据"全国自然人人脸比对V3"API，重点解决AES-128-CBC加密的技术难点。文章详细展示了利用Node.js原生crypto模块实现加密解密的完整方案，包括随机IV生成、PKCS7填充处理、Buffer与Base64转换等核心环节。同时提供了错误处理指南、Serverless架构应用场景，以及性能优化建议。该方案充分发挥Node.js在非阻塞I/O和事件驱动方面的优势，特别适合高并发、低延迟的实名认证业务场景，能有效降低开发复杂度，提升系统
Node.js 异步非阻塞编程模型核心特点
觅_的博客
12-25 309
摘要： Node.js采用单线程事件循环模型实现高并发处理，主线程通过事件循环调度异步任务回调，避免阻塞。其核心优势在于非阻塞I/O机制——耗时操作由libuv线程池处理，主线程保持高效运行。通过回调/Promise/async-await等异步语法，特别适合I/O密集型场景（如API服务），单进程可支撑数万并发。但CPU密集型任务需配合多进程方案。这种"主线程调度+线程池I/O+事件驱动"的架构，使其成为前后端开发的优选方案。
Node.js Path 模块
weixin_53165181的博客
12-25 815
path跨平台一致性：抽象了不同操作系统的路径差异安全性增强：提供标准化的路径处理，减少路径遍历漏洞开发效率：简化复杂的路径操作逻辑代码可维护性：统一的 API 使代码更清晰易懂在实际开发中，应始终使用path模块而非字符串拼接来处理路径，同时注意结合fs模块进行实际的文件系统操作验证。对于现代 Node.js 应用，还可以考虑使用 TypeScript 的类型安全来进一步加强路径操作的安全性。关键要点始终使用而非字符串拼接处理用户输入路径时必须验证和规范化理解resolve()和。
Windows 环境下 Node.js + Claude Code 安装与配置教程
最新发布
2201_75415299的博客
12-28 386
所有操作全程使用 PowerShell 即可，避免CMD的各类兼容问题；权限报错的核心解决办法就是「管理员身份运行PowerShell」，这两个小细节能避开90%的安装问题。配置环境变量的目的是让 Claude Code 正常连接中转服务，提供。温馨提示：永久配置完成后，，下载安装包并运行，保持。两种方式，按需选择即可。，环境变量才能生效。
Node.js 后端 CORS 跨域问题终极解决指南
weixin_45680024的博客
12-25 1076
node.js后端跨域问题收录
Webpack生态记录器：webpack-log实用指南
webpack-log是Webpack生态系统中的一个模块，它提供了一个记录器（logger），用于记录Webpack在构建过程中的日志信息。记录器在开发和调试过程中扮演着重要角色，因为它可以帮助开发者追踪和诊断构建时可能出现的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值