webpack学习

最新推荐文章于 2024-05-20 09:22:39 发布
最新推荐文章于 2024-05-20 09:22:39 发布
阅读量59 收藏
点赞数
文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43418929/article/details/117165056
版权

webpack的作用

webpack的主要作用是编译前端的项目成为一个js文件，在编译中需要设置入口与出口
并可以对一下配置进行解析
loader配置
这个是文件的类型配置，比如.vue文件，jpg文件，css文件等等
p’lu’gins插件
plugins插件是方便编译进行加载的，例如自动化编译刷新页面等
常用的webpack插件是html-webpack-plugin，clean-webpack-plugin

前端leader-峰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack 学习文件
12-03
webpack打包原理 学习记录 【 eval函数在非严格模式下执行会创建执行上下文，会修改到exports的值 】
webpack学习从基础学起
kokunka的博客
04-23 1940
webpack学习从基础学起一、webpack的起步二、webpack的配置三、webpack的loader3.1 css-loader的使用3.2 less-loader的使用3.3 url-loader的使用3.4 file-loader的使用
webpack学习笔记
Vivien_CC的博客
01-10 1344
之后，Webpack会将所有编译完成的模块按照它们之间的依赖关系组合成一个单独的文件，这个文件就是我们所说的“bundle”，最后将bundle文件发布到网站上，完成打包处理。resolve.modules 的默认值是 ['node_modules']，含义是先去当前目录下的 ./node_modules 目录下去找想找的模块，如果没找到就去上一级目录 ../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推，这和 Node.js 的模块寻找机制很相似。
Webpack学习
amuist_ting的博客
10-22 505
webpack是一种打包工具 ----安装 npm install webpack webpack-cli webpack-dev-server -D ----webpack配置文件 可命名 webpack.config.js 单个总的配置文件 也可以拆分成3个配置文件，另建文件夹config，新建3个配置文件：webpack.common.js、webpack.dev.js、webpack.prod.js 其中，webpack.common.js配置文件中存放一些开发环境和生产环境公用的配置；
webpack学习感受
syh221837的博客
03-31 181
从刚入行的时候就一直听说webpack如何好用，对项目的帮助有多大，但是自己一直没有仔细的去了解过，平时项目中也仅仅停留在够用的阶段，最近看了几篇关于webpack学习的文章、视频，想说说自己对webpack的认识。 webpack其实有两个主要的机制，一个是loader一个是plugin，这两个机制构建了webpack强大的功能。使其成为现在前端模块化开发过程中不可获取的一项。 对于loader，它的主要功能是加载项目中各种模块，因为webpack内部默认是按照javascript规范打包模块，所以对
webpack学习资料
11-25
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。该资料为webpack学习课程的课件及代码资料
nodejs、webpack学习
08-18
nodejs、webpack学习
webpack学习文档
08-03
webpack优化构建速度示例-配置cache.type开启磁盘缓存:
qq_36413371的博客
05-16 155
开启filesystem缓存，构建耗时缩短了 754-136=618ms，同时.开启filesystem缓存前。开启filesystem缓存后。在 webpack 5 中，
webpack优化构建速度示例-resolve.extensions:
qq_36413371的博客
05-15 200
当项目不仅仅包含.js或.json文件，还包含其他类型文件(如.ts、.vue、.css)作为模块时，配置resolve.extensions可以不必要的文件搜索提高性能。可以看到优化resolve.extensions的顺序，简单的三个小模块的打包就带来了1508-1467=41ms的性能提升。
webpack优化构建速度示例-babel-loader开启缓存cacheDirectory:
qq_36413371的博客
05-16 187
配置后， 可以看到node_modules/.cache/babel-loader目录下生成了缓存文件，多次打包后，时间从723缩短到了529ms。同时我们还看到webpack输出了cacheable modules 672 bytes， 代表webpack缓存不会受影响。
node + koa2：打包、阿里云上线启动
最新发布
weixin_44384273的博客
05-20 80
node + koa2：打包、阿里云上线启动
webpack优化构建速度示例-externals:
qq_36413371的博客
05-15 183
可以看到将jquery排除在打包内，节省了319-177=144ms。这样做的主要目的是为了解决打包文件过大的问题。
webpack优化构建速度示例-合理配置loader的include exclude:
qq_36413371的博客
05-15 260
以便 babel-loader 只处理必要的文件。可以看到配置后节省了1184-814=340ms。
解决 vue3 vant 4.9.0 按需引入，组件样式失效问题
qq_38233172的博客
05-16 113
webpack 配置好之后，组件中使用vant 组件已经不需要在引入任何vant 组件，且使用的时候写法一定要是。不能是，这种方式会导致样式失效。
webpack优化构建体积示例-并行压缩：
qq_36413371的博客
05-15 216
这是因为 Webpack 会在构建过程中添加一个额外的步骤：代码压缩。代码压缩是一个资源密集型的任务，它需要分析代码，移除不必要的字符、空格、注释，以及应用各种优化策略来减小最终打包文件的体积。可以看到构建产物减小了 321-316=5kb。
vue3 设置静态资源图片
m1011815213的博客
05-16 217
【代码】vue3 设置静态资源图片。
webpack源码学习
05-31
学习 webpack 源码需要具备一定的前端知识，比如 Node.js、JavaScript、ES6 语法、模块化等等。以下是我推荐的 webpack 源码学习路径： 1. 阅读 webpack 官方文档，了解 webpack 的基本概念和使用方法，对 webpack ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值