webpack学习（2）

最新推荐文章于 2024-07-12 20:59:03 发布
最新推荐文章于 2024-07-12 20:59:03 发布
阅读量204 收藏
点赞数
文章标签： webpack 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51394334/article/details/125642720
版权

一、loader

1.loader帮助webpack将es6转化成es5，typeScript转化成es5，scss、less转化成css。

2.使用过程：

3.css文件配置

(1).安装css-loader

注意若安装loader与webpack版本不相符会出现类似报错

解决：npm install css-loader@2.0.2 --save-dev   即可

(2).安装style-loader

命令：npm install style-loader@0.23.1 --save-dev

注意：

4.webpack-less文件配置


（1）.安装less-loader

命令：npm install --save-dev less-loader@4.1.0 less  

配置webpack.config.js文件：

 

（2）.创建less文件

（3）.在main.js文件中写less的依赖

 

 

小徐不怂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
webpack学习日记（1）
eswang的CSDN博客
01-26 225
前言 终于开始踩坑webpack了，也算是对自己的一个挑战吧，在业务还写不熟练的时候就开始了工程化的探索？也不尽然，毕竟他们也是息息相关的，我对这种东西其实一直都是听厌烦的，觉得有需要就去查就可以了，但是随着自己野心越来越大，有些能最方便你一步登天的东西自然要认真去看，webpack无疑是其中的佼佼者。 loader 在学之前，我对于webpack的了解很有限，大致集中在entry, output...
webpack学习（一）
何良语的博客
03-05 379
在学习使用webpack，所以写个博客记录一下，方便以后查阅在安装webpack之前在电脑里新建一个webpack项目工程文件夹，然后在这个文件夹中打开命令行要使用webpack，必须先安装配置好nvm，然后安装npm、node在命令行中敲入这行代码,全局安装webpacknpm install -g webpack 输入命令行查看webpack是否安装成功：webpack -v使用这行命令时老是...
webpack中ts编译加兼容性转换：swc对比babel+tsc，附示例代码
小硅壳的博客
06-12 2199
使用babel或swc配置typescript代码的编译并处理为兼容低版本浏览器的js代码，并对比它们的表现。
Webpack5 系列（九）：TS 打包配置
weixin_41990299的博客
11-09 99
theme: jzman highlight: atelier-cave-light 一、前言 上一篇讲到库的打包，本篇将介绍 TypeScript 的打包配置。 二、TS TypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts，就需要安装特定的 loader 来“翻译” ts 语法。 2...
webpack 配合babel 将es6转成es5 超简单实例
热门推荐
现在学习也不晚
11-30 4万+
今天接触了webpack，第一次使用webpack进行转码，竟然稀里糊涂就成功了，哈哈。下面附上流程创建个文件夹，初始化一下，首先全局安装webpacknpm install webpack -g然后安装babelnpm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader在当前文...
webpack 学习文件
12-03
**Webpack 学习详解** Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。它将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS 文件、图片或任何其他资源。Webpack 将这些模块相互关联...
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack学习资料
11-25
在深入Webpack的学习中，我们需要了解以下几个关键概念： 1. **Entry（入口）**：Webpack 构建的起点，它是你的应用的主文件，可以是单个文件或多个文件。通过配置entry属性，你可以指定多个入口点，创建多个独立的...
nodejs、webpack学习
08-18
nodejs、webpack学习
vue2.0和webpack学习
03-19
学习Vue 2.0和Webpack，需要理解这两个工具的基本概念和工作原理，掌握它们的配置和使用方式，同时了解如何通过它们构建高效、可维护的前端项目。这将有助于你提升前端开发能力，适应不断发展的前端技术趋势。
用灵活的依赖排除策略来规避不必要的依赖关系
2301_79564718的博客
07-09 245
特别是当某个强大的库或框架提供了众多功能，但我们的项目仅需其中一部分时，如何优雅地“裁剪”这些不必要的部分，成为了提升项目效率与性能的关键。npm 和 yarn 这样的包管理器也提供了方法来避免安装或加载特定依赖，尽管这通常是通过不直接依赖它们来实现的，比如使用别名或条件性安装。编写自定义的加载器或插件：在一些更高级的场景下，你可能需要编写一个自定义的Webpack loader或插件，来在打包过程中动态地修改或排除代码。这样，每个模块或应用都可以独立管理其依赖，从而减少全局冲突和不必要的加载。
Vue3 使用Vite构建项目
生产队的驴
07-12 289
Webpack在启动开发服务器时需要先打包整个应用，这个过程可能包括语法解析、依赖收集、代码转译、打包合并和代码优化等步骤，这些操作通常会导致启动缓慢。而Vite则采用了一种“按需编译”的方式，它基于原生ES模块（ESM）工作，只处理被浏览器实际请求的模块，从而大大缩短了启动时间。官方文档：https://vitejs.cn/vite3-cn/guide/
前端优化方案有哪些？
qq_70036866的博客
07-08 212
3.4.1. 3.4.1 v-for 须为每一项设置唯- key 属性3.4.2. 3.4.2 v-for与 v-if。2 区分 computed 和 watch 的使用场景3.6.3.6 组件销毁时，需移除手动绑定的事件。1 区分 computed 和 方法 的使用场景。开启静态压缩时，前端打包时需准备好.gz 文件。Vue 内置 API 的使用注意。Moment.js 2.x的优化。ECharts 5.x的按需引入。Lodash 4.x的按需引入。Vue 内置指令的使用注意。UI 框架组件的按需引入。
前端构建工具（webpack&vite）
yuanmenglxb2004的博客
07-10 901
src 是把所有的源码放在了这个src 里面。我们使用打包工具的前提是这个项目得是一个node项目，所以我们在使用webpack要先把项目初始一下,会出现一个package.json,初始化就完事了。然后就安装依赖. -D表示的是开发依赖，区分一下是开发的时候要用的还是运行的时候要用的。然后再项目中创建src 目录，然后编写代码，index.js是默认主目录，是入口文件。然后执行‘’yarn webpack 来对代码进行打包，打包好观察dist目录。dist目录就是打包后的版本。
前端调试技巧(npm Link，vscode调试，浏览器调试等)
zhangqiang
07-09 972
把传给子组件的props和事件打包起来以$attrs变量传给后代组件，可直接调用后代组件的api，避免了逐个声明props进行props的接收。在本地开发npm模块的时候，我们可以使用npm link命令，将npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试。还有另外一种方式是类似通过jsx的方式，通过一个函数传参的方式，决定是渲染哪种类型的组件。针对H5页面的简单且后续不维护的表单，使用配置进行每一个form-item的生成。补充：如果有多个tab,则可以将状态放到tabs中统一处理。
js逆向-webpack-python
最新发布
Sdwq12的博客
07-12 253
-发现不同执行方式会有不同得生成n得值也就是 e（直接将代码copy进本地）--t.header.user 是动态变得，获取时通过响应头获取，在传参。--我们需要找到其加载器，都知道本地，使用加载器调用函数。-- e 为 key 并且是随机变换得（但只有两个值）10、需要将另一个其参数的映射文件复制本地。-- 分析发现ee是一个webpack。--发现一部分是一个标准的加载器写法。--en函数错误，在将en导入本地。--然后把加载器赋值给全局变量。--有参数说明是单文件传入。--搜索参数找到其位置。
何为vue脚手架?
HHR_hr的博客
07-06 1186
自动生成项目模板运行和开发。
【渗透测试】Webpack源码泄露（js.map泄露）
网络安全从业者的学习笔记
07-10 399
在Vue项目中使用Webpack时，如果未正确配置，会生成一个.map文件，它包含了原始JavaScript代码的映射信息。这个.map文件可以被工具用来还原Vue应用的源代码，从而可能导致敏感信息的泄露等风险
Kithara与OpenCV （一）
EZCODETECH的博客
07-09 1082
这些指南将帮助您学习如何使用 OpenCV 3.0、3.4 和 4.1 库在内核模式下进行实时图像处理。我们假设您基本上已经知道如何设置项目并打开驱动程序以开始您的工作。如果你对此不熟悉，你应该看看第一个项目教程。OpenCV 使用我们的实时 Windows 虚拟化。这种虚拟化在实时环境中模拟 Windows API 的最重要部分。只有在无法进行仿真或不合理的情况下，虚拟化才会离开实时环境并依赖于 Windows。此外，这种虚拟化是有限的，因此在实时使用OpenCV时存在一些限制。
webpack源码学习
05-31
学习 webpack 源码需要具备一定的前端知识，比如 Node.js、JavaScript、ES6 语法、模块化等等。以下是我推荐的 webpack 源码学习路径： 1. 阅读 webpack 官方文档，了解 webpack 的基本概念和使用方法，对 webpack 的编译流程和插件系统有一个初步的了解。 2. 阅读 webpack 的源码仓库，了解 webpack 的目录结构和源码组织方式。 3. 阅读 webpack 的入口文件 `webpack.js`，了解 webpack 的基本使用和调用方式。 4. 阅读 webpack 的核心模块 `lib/webpack.js`，了解 webpack 的编译流程和模块化实现。 5. 阅读 webpack 的插件系统，了解插件的注册和调用方式，以及插件的实现原理。 6. 阅读 webpack 的 loader 系统，了解 loader 的编写和使用方式，以及 loader 的实现原理。 7. 阅读 webpack 的打包过程，了解 webpack 的输出文件和 chunk 机制，以及 webpack 的优化策略。 8. 阅读 webpack 的测试用例，了解 webpack 的功能测试和性能测试的实现方式。 以上是一个比较完整的学习路径，需要耐心和时间。当然，如果您只是想了解 webpack 的一些基本原理和实现方式，可以选择阅读 webpack 的源码仓库和官方文档中的一些核心部分。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值