![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
文章平均质量分 72
mytheart
学习是一种生活方式。享受过程。
展开
-
webpack常用loader和plugin
webpack常用loader和pluginfile-loaderfile-loader: 生成依赖的文件到输出目录,然后将模块文件设置为:导出一个路径\//file-loaderfunction loader(source){ // source:文件内容(图片内容 buffer) // 1. 生成一个具有相同文件内容的文件到输出目录 // 2. 返回一段代码 export default "文件名"}url-loaderurl-loader:包含了file-loader的功能,原创 2021-07-27 14:11:21 · 291 阅读 · 0 评论 -
Webpack之性能优化篇
Webpack之性能优化篇性能优化概述本文所讲的性能优化主要体现在三个方面:构建性能这里所说的构建性能,是指在开发阶段的构建性能,而不是生产环境的构建性能;优化的目标: 降低从打包开始,到代码效果呈现到页面所需要的时间。传输性能传输性能是指,打包后的JS代码从服务器传输到用户浏览器经过的时间。在优化传输性能时要考虑到:总传输量:所有需要传输的文件内容加起来,就是总传输量;文件数量:当访问页面时,需要传输的JS文件数量,文件数量越多,http请求越多,响应速度越慢;浏览器缓存:原创 2020-08-26 08:01:06 · 4230 阅读 · 0 评论 -
webpack-编译结果分析
src文件下有有两个文件index.jsconsole.log("index module")var a = require("./a")a.abc();console.log(a)a.jsconsole.log("module a")module.exports = "a";npm run build 编译后的结果//合并两个模块// ./src/a.js// ....原创 2020-02-18 17:05:52 · 287 阅读 · 0 评论 -
webpack-plugin
pluginloader的功能定位是转换代码,而一些其他的操作难以使用loader完成,比如:当webpack生成文件时,顺便多生成一个说明描述文件当webpack编译启动时,控制台输出一句话表示webpack启动了当xxxx时,xxxx这种类似的功能需要把功能嵌入到webpack的编译流程中,而这种事情的实现是依托于plugin的plugin的本质是一个带有apply方法的对象...原创 2020-02-18 16:53:38 · 562 阅读 · 0 评论 -
webpack-loader
loaderwebpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。webpack loader: loader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。loader函数的将在模块解析的过程中被调用,以得到最终的源码。全流程...原创 2020-02-18 16:50:45 · 195 阅读 · 0 评论 -
webpack-编译过程分析
webpack 编译过程 {ignore}webpack 的作用是将源代码编译(构建、打包)成最终代码[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KOylt0bl-1582009061629)(assets/2020-01-09-10-26-15.png)]整个过程大致分为三个步骤初始化编译输出## 初始化此阶段,webpack会将CLI参数、...原创 2020-02-18 15:03:54 · 930 阅读 · 0 评论 -
webpack-模块化兼容性
模块化兼容性由于webpack同时支持CommonJS和ES6 module,因此需要理解它们互操作时webpack是如何处理的同模块化标准如果导出和导入使用的是同一种模块化标准,打包后的效果和之前学习的模块化没有任何差异不同模块化标准不同的模块化标准,webpack按照如下的方式处理最佳实践代码编写最忌讳的是精神分裂,选择一个合适的模块化标准,然后贯彻整个开发阶段。...原创 2020-02-18 14:34:11 · 283 阅读 · 0 评论