03 2021 档案

webpack(10) webpack扩展(插件. loader)
摘要：webpack做的事情, 仅仅是分析各个模块间的依赖关系, 将chunk里的资源合并成资源列表, 然后输出打包文件; 更多的事情, 需要loader和plugin来完成; plugin的用法, 通过npm来找用法 1. clean-webpack-plugin: 每次打包前清除配置文件中的输出包. 阅读全文
posted @ 2021-03-13 15:48 当当和瓶瓶 阅读(185) 评论(0) 推荐(0)
webpack(9) 配置文件
摘要：一. 经过我实践证明: webpack的配置最好采用以下: 配置文件返回一个函数, 而该函数满足以下两个条件: 包含一个参数, 该参数作为命令行参数的传递对象, 能够为不同配置灵活配置; 并且返回一个配置对象; 运行: npx webpack --env prod 则会是生成环境, 运行: npx 阅读全文
posted @ 2021-03-11 19:08 当当和瓶瓶 阅读(286) 评论(1) 推荐(0)
webpack(8) plugin
摘要：loader和plugin的区别: loader是转换代码的, 从一种代码(less, 图片)转成另一种代码(css, src的base64格式); plugin: 注册编译器的各种事件,干预webpack的编译过程. 当一些操作要嵌入到webpack的编译流程中,而这些操作不涉及到代码转换, (w 阅读全文
posted @ 2021-03-11 16:12 当当和瓶瓶 阅读(91) 评论(0) 推荐(0)
webpack(7) 样式处理和图片处理之手写loader
摘要：一. webpack模块中的require发生的事情: webpack模块中的require("xx");与nodejs里的require是不一样的. webpack会在读取后进行loader转换, 再进行抽象语法数分析, 比如require("src/assets/index.css") ; we 阅读全文
posted @ 2021-03-08 20:20 当当和瓶瓶 阅读(237) 评论(0) 推荐(0)
webpack(6) loader
摘要：webpack做的事情, 仅仅是分析各个模块间的依赖关系, 将chunk里的资源合并成资源列表, 然后输出打包文件; 更多的事情, 需要loader和plugin来完成; 一. loader 本质是一个函数, 它的作用是将某个源码字符串转换成为另一个源码字符串. loaders执行过程:在webpa 阅读全文
posted @ 2021-03-07 18:42 当当和瓶瓶 阅读(194) 评论(0) 推荐(0)
webpack(5)入口和出口
摘要：一. 路径前提知识: node中的./表示: 在模块化代码中, 表示当前js文件的目录; 在路径处理中, 表示node运行目录;webpack打包时,是指webpack.config.js所在的目录 __dirname:当前js文件所在的目录, 是绝对路径; path.resolve("./","x 阅读全文
posted @ 2021-03-07 15:37 当当和瓶瓶 阅读(329) 评论(0) 推荐(1)
webpack(4)编译过程分析
摘要：一: webpack编译过程分为初始化, 编译和输出三个阶段. 二: 初始化: 整理配置, 形成最终配置对象 1.命令行中的配置参数的权重最高, 因为最晚确定的. 命令中配置参数用: --xx=yy表示 比如 npx webpack --mode=development --devtool=eval 阅读全文
posted @ 2021-03-07 10:51 当当和瓶瓶 阅读(198) 评论(0) 推荐(0)
webpack(3) webpack打包结果分析
摘要：一 以devtool是source-map的情况下, webpack打包的结果, 即经过webpack打包后生成的文件: 1. webpack打包的最终结果, 是一个合并了所有模块的js文件. 2. 该文件为了防止变量污染全局, 整体是一个立即执行函数. 3.定义了一个__webpack_modul 阅读全文
posted @ 2021-03-05 18:20 当当和瓶瓶 阅读(509) 评论(0) 推荐(0)
js模块化
摘要：后端的commonjs规范 一. nodejs中, 只能有一个入口文件, 即启动文件. 在开发时候, 需要尽可能细致的分多个文件, 就产生了模块化规范的要求. 二. 模块化有两个核心要素: 隐藏和暴露; 1. 有导入和导出的文件叫模块. 2. 模块内的所有代码都是隐藏的, 不会污染全局. 3. 导出 阅读全文
posted @ 2021-03-04 14:00 当当和瓶瓶 阅读(208) 评论(0) 推荐(1)
webpack(2) 安装和使用
摘要：一. webpack的特点: 12年, webpack就诞生了. 为了让开发者集中精力开发业务代码, 支持多种生态(前端和node都可以) 打包的过程是node环境中运行的. 基于模块化. 模块内部可以使用es6标准和commonjs标准, webpack都支持. 打包的结果是一个普通函数 webp 阅读全文
posted @ 2021-03-03 16:53 当当和瓶瓶 阅读(156) 评论(0) 推荐(1)
webpack(1) 为什么要用构建工具
摘要：一. 为什么需要构建工具 当前端出现es6模块化, export import能够很方便的导入导出,在这种情况下, 为什么需要构建工具? 根本原因:1. node后端 和 前端获取文件方式不一样: 前端是网络请求, 后端是直接读取文件; 2. 开发时候和运行时候的代码状态不一样, 开发时: 运行时: 阅读全文
posted @ 2021-03-03 14:19 当当和瓶瓶 阅读(176) 评论(0) 推荐(0)
babel来进行js转换
摘要：一.babel 含义: 通天塔, 取统一人类的行动中的统一的意思. 1.将各种我们日常开发中用的顺手的语言(比如es6, typescript ...) 编译成 不同版本浏览器能识别的 语言; 2. babel本身只是分析, 真正的语言转换交给插件来完成 二 安装 : 1.安装命令: npm ins 阅读全文
posted @ 2021-03-02 14:46 当当和瓶瓶 阅读(1910) 评论(0) 推荐(0)
less实用语法
摘要：一. 变量 1 @width: 10px; 2 @height: @width + 10px;//带单位的加减, 以运算符左边单位为主 3 4 #header { 5 width: @width; 6 height: @height; 7 } 8 编译为 9 #header { 10 width: 阅读全文
posted @ 2021-03-02 11:11 当当和瓶瓶 阅读(190) 评论(0) 推荐(0)