![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
文章平均质量分 89
前端LeBron
深圳大学物联网工程大三,前端开发工程师一枚。业余摄影师,交流/约拍可私戳。字节跳动内推码:4FCV6BV.
展开
-
[打包优化]Webpack体积压缩
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! 掘金原文链接 HTTP压缩 HTTP压缩是一种内置在 服务器 和 客户端 之间的,以改进传输速度和带宽利用率的方式; HTTP压缩的流程什么呢? 第一步:HTTP数据在服务器发送前就已经被压缩了;(可以在webpack中完成) 第二步:兼容的浏览器在向服务器发送请求时,会告知服务器自己支持哪些压缩格式; 第三步:服务器在浏览器支持的压缩格式下,直接返回对应的压缩后的文件,并且在响应头中告知浏览器; 压缩格.原创 2021-06-02 10:33:57 · 404 阅读 · 0 评论 -
[分享]Webpack打包分析工具
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! 掘金原文链接:[分析]Webpack打包分析 Webpack打包分析 分享时间和文件的分析工具,便于优化打包产物。 打包的时间分析 如果希望看到每一个Loader、每一个Plugin消耗的打包时间,可以借助于一个插件:speed-measure-webpack-plugin 注意:该插件在最新的webpack版本中存在一些兼容性的问题(和部分Plugin不兼容) 截止2021-3-10日,但是目前该插件还在维护.原创 2021-05-31 10:34:20 · 448 阅读 · 0 评论 -
[打包优化]Webpack DLL
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! 掘金原文链接 认识DLL库 什么是DLL DLL全称是动态链接库(Dynamic Link Library),是为软件在Windows中实现共享函数库的一种实现方式; 那么webpack中也有内置DLL的功能,它指的是可以将可以共享,并且不经常改变的代码,抽取成一个共享的库; 这个库在之后编译的过程中,会被引入到其他项目的代码中,减少的打包的时间; DDL库的使用分为两步: 第一步:打包一个DLL库; 第二.原创 2021-05-28 10:44:04 · 1692 阅读 · 0 评论 -
Webpack DevServer和HMR
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! Webpack-Dev-Server 为什么要搭建本地服务器 目前开发的代码,为了运行需要有两个操作 npm run build编译 通过live-server或者直接通过浏览器打开html文件,查看效果 为了完成自动编译,webpack提供了几种可选的方式 Webpack watch mode Webpack-dev-server Webpack-dev-middleware Webpack W.原创 2021-05-26 10:41:43 · 156 阅读 · 0 评论 -
Webpack 模块化原理和SourceMap
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! Webpack模块化 Webpack打包的代码,允许我们使用各种各样的模块化,但是最常用的是CommonJS、ES Module。 包括如下原理: CommonJS模块化实现原理; ES Module实现原理; CommonJS加载ES Module的原理; ES Module加载CommonJS的原理; CommonJS原理: 打包前 const { dateFormat, priceFormat } .原创 2021-05-24 10:32:11 · 178 阅读 · 0 评论 -
Webpack Plugin知识分享
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! 认识Plugin Loader是用于特定的模块类型进行转换; Plugin可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等; 常用Plugin CleanWebpackPlugin 每次修改了一些配置,重新打包时,都需要手动删除dist文件夹: 我们可以借助于一个插件来帮助我们完成,这个插件就是CleanWebpackPlugin; 安装: npm install clean-.原创 2021-05-21 10:18:52 · 69 阅读 · 0 评论 -
Webpack Loader知识分享
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! 原文链接:Webpack Loader知识分享 认识Loader Loader可以用于对模块的源代码进行转换; 在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须定制对应的loader来完成这个功能。 loader配置方式 内联方式:import "css-loader!../css/index.css"; loader和文件路径用!分隔 配置方式:webpack.config.js .原创 2021-05-19 10:32:47 · 126 阅读 · 0 评论 -
初识Webpack
写作不易,未经作者允许禁止以任何形式转载!如果觉得文章不错,欢迎关注、点赞和分享! 原文链接:初识Webpack Webpack初体验 用Webpack解决什么问题 模块化 高级特性、开发效率、安全性 ES6+、Typescript、sass、less 监听文件变化并反映到浏览器上,提高开发效率 开发完成后的打包,压缩、合并、tree-shaking等以及其他相关的优化 Webpack是什么 Webpck是一个静态的模块化打包工具,为现代的JS应用程序 我们来对上面的解释进行拆解: .原创 2021-05-18 10:17:59 · 256 阅读 · 4 评论