随笔分类 -  webpack

webpack执行过程
摘要：webpack cli 执行过程 参数解析 加载webpack.config.js 执行webpack() webpack.js compiler.run() 开始编译 创建 Compilation() js class MainTemplate extends Tapable { this.hoo 阅读全文
posted @ 2019-01-15 14:04 pluscat 阅读(3842) 评论(0) 推荐(0)
webpack-bundle.js原理
摘要：bundle.js 源码 自执行函数 require模块 require静态方法 依赖关系 打包后代码 阅读全文
posted @ 2019-01-14 16:55 pluscat 阅读(1823) 评论(0) 推荐(0)
webpack-loader原理
摘要：loader loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 loader API，并通过 this 上下文访问。 loader配置 本地loader配置 loader用法 loader 工具库 js import { getOptio 阅读全文
posted @ 2019-01-13 23:54 pluscat 阅读(3253) 评论(0) 推荐(0)
tapable事件流插件
摘要：tapable Webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundle的Compilation都是Tapable的实例 SyncHook 串行同步执行,不关心返回值 S 阅读全文
posted @ 2019-01-04 14:30 pluscat 阅读(967) 评论(0) 推荐(0)
webpack初步搭建Vue项目
摘要：对文件进行打包 本地热更新 处理图片资源 url loader依赖file loader 处理css文件 css预处理器 预处理器工具 处理html文件 处理js文件 兼容es6写法 处理vue文件 处理vue中使用jsx文件 处理package.json跨平台传变量问题 webpack配置 单独配 阅读全文
posted @ 2018-11-19 18:43 pluscat 阅读(568) 评论(0) 推荐(0)
webpack开发工具
摘要：source map 用来调试打包后的代码 阅读全文
posted @ 2018-11-11 20:18 pluscat 阅读(540) 评论(0) 推荐(0)
webpack管理输出
摘要：管理html的bundle依赖 html webpack plugin可以自动给html添加bundle文件 清理dist文件夹 阅读全文
posted @ 2018-11-11 20:17 pluscat 阅读(311) 评论(0) 推荐(0)
webpack管理资源
摘要：加载Css webpack并不能处理js以外的静态资源，通过loader来支持他们 加载图片 file loader可以处理图片资源，字体资源 加载数据 阅读全文
posted @ 2018-11-11 20:16 pluscat 阅读(267) 评论(0) 推荐(0)
webpack缓存
摘要：缓存 缓存如何工作 web中的缓存 web缓存的优势 web缓存的问题 webpack缓存原理 可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很 阅读全文
posted @ 2018-11-11 11:39 pluscat 阅读(970) 评论(0) 推荐(0)
webpack起步
摘要：为什么要使用webpack 很牛逼的样子 基本概念 entry配置 output设置 filename字段中可以填的选项 模板 | 描述 | 指定长度 | | [hash] | 模块标识符(module identifier)的 hash | [chunkhash] | chunk 内容的 hash 阅读全文
posted @ 2018-11-11 10:25 pluscat 阅读(554) 评论(0) 推荐(0)