- 博客(31)
- 收藏
- 关注
RSS订阅
原创 webapck 按需加载
今天来看看 webpack 按需加载生成的代码^_^。环境node v10、webpack@4、 wepback-cli@3。概念 chunk 和 module 的区别：chunk 包含一个或多个 module ，即一个块包含一个或多个模块。一般来说，一个 JS 文件就是一个 module 。而在 webapck 的配置中，一个入口对应一个 chunk ，当然还可以存在异步的 chunk ，打包出来的 JS 脚本由一个个的 chunk 构成，脚本运行的时候也是从某个 chunk 开始运行。dem
2021-03-30 23:37:45
404
原创 webpack4 生成的代码
Webpack 生成的代码在学习 Webpack 的时候，只是简单的了解了一下打包后的代码，但并没有去仔细研究，今天来研究一下它的真面目。配置var path = require('path');module.exports = { // webapck3 是没有 mode 这个选项的 // webapck4+ 的 mode 默认是 'production' mode: 'development', entry: './src/single.js',
2021-03-08 20:19:55
163
原创 JS 模块化（CommonJS，AMD，CMD，ESM，UMD）
JS 模块化（CommonJs，AMD，CMD，ESM，UMD）早期的 JS 编码并没有模块化这个概念，写出来的代码就像“挂面”一样，有时候单个页面的 JS 代码就很长，维护起来十分麻烦，而且还存在“变量污染”、“命名冲突”和“缺少文件依赖”等问题。随着Node.js的出现和前后端分离开发模式的愈益流行，JS模块化技术也越来越成熟，其主要思想是利用“自执行函数+闭包”和“异步加载JS”来解决以上的问题。其实JS模块化的发展历程也是比较曲折的，这里给出一个其描述比较详细的链接：https://www.cn
2021-03-06 21:46:11
429
转载 Vue 3 组合式
Vue31. 开始1.1 简介1.1.1 什么是 Vue？Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建的渐进式框架。Vue 有两个核心功能：声明式渲染：Vue 基于标准 HTML 拓展了一套自己的模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系响应式：Vue 会自动追踪 JavaScript 状态，并在其发生变化时响应式地更新 DOM。1.1.2 渐进式框架Vu
2024-03-12 17:34:41
27
原创 webpack 文档（指南）- Shimming 预置依赖
Shimming 的意思是用垫隙片填入。shim 预设依赖就是说可以将第三方模块当作“垫隙片”填入我们的项目，所以预设依赖应该是全局可用的，甚至我们不需要手动声明引入这个模块（比如使用 require 或 import 语句），而是直接使用它暴露在全局中的那个变量或常量就行。wepback 为我们提供了 ProvidePlugin 这个插件来实现这个方案。当然，除了 ProvidePlugin 外，还有 imports-loader 和 exports-loader 这两个有意思的加载器，它们分别可以改
2021-08-28 14:18:50
304
1
原创 webpack 文档（指南）- 创建 library
有些时候，我们可能需要制作自己的一个 JS 库。webpack 有提供相应的功能。创建一个 library首先准备要被打包成“库”的文件。将某个 id 为 app 的元素的内容变成 MyLibaray ，并打印出 lodash 是什么。基本的目录结构如下：index.css.lib-box { color: red; text-align: center; background-color:green;}index.html<div class="lib-b
2021-05-30 23:06:52
268
原创 webpack 文档（指南） - 缓存 （hash、chunkhash和contenthash）
浏览器在多次访问静态资源文件的时候，如果该文件已经在本地缓存，并且它的名称没有改变，那么浏览器会认为它没有被更新，便不会去请求服务器，而是使用该静态资源的缓存版本。如果某个文件被更改，我们希望浏览器应该重新请求它，而不是使用缓存版本，所以文件被修改后，它的名称也应该被改变。在 webpack 中，最后生成的 chunk 文件都是由一个个的 module 编译后组合而成的，浏览器请求的 JS 文件实际上就是一个个的 chunk 。当我们修改某个 module 后，其所属 chunk 打包后的 JS 文件名称
2021-05-23 20:58:26
598
原创 webpack 文档（指南） - 代码块分割（抽离公用模块代码）
webpack 的代码分离的方式有以下三种：入口起点：entry 使用多入口；防止重复：使用 SplitChunksPlugin 去重和分离 chunk。；动态导入：通过模块的内联函数调用（懒加载）来分离代码；入口起点以入口分割代码的方式，只需要配置多入口就可以。index.jsconsole.log('index.js');index2.jsconsole.log('index2.js');webpack.config.jsvar HtmlWebpackPlugin = re
2021-05-16 17:28:18
443
原创 webpack 文档（指南）- 摇树优化
摇树优化，即打包编译的时候移除未使用的代码。但是有一个前提，我们编写的代码必须是基于 ES6 Module 的静态结构特性的。以下是静态结构的代码。import a from './a';import b from './b';export default a;以下是非静态结构的代码。console.log('index.js');const flag = Math.random();if (flag) { module.exports = 1;} else { modu
2021-05-15 15:17:37
432
原创 webpack 文档（指南）- HMR 热模块替换
启用 HMRHMR 即 Hot Module Replace ，它是 webpack 内置的 HMR 插件，开启该功能后，可以很大程度提高生产效率，通常与 webpack-dev-server 配合使用。print.jsexport default function print(...args) { console.log(...args);}index.jsconsole.log('开始执行 index.js');// 引入该文件import print from './prin
2021-05-12 22:05:38
241
原创 webpack 文档（指南）- 开发环境
https://blog.csdn.net/qq_36605165/article/details/115328525#t4
2021-05-11 23:22:39
638
原创 webpack 文档（指南）- 管理资源
加载 images 图像index.jsimport MyImage from './images/1.png';console.log(MyImage);webpack.config.jsvar HtmlWebpackPlugin = require('html-webpack-plugin');var { CleanWebpackPlugin} = require('clean-webpack-plugin');module.exports = { mode: 'de
2021-04-30 00:00:04
135
原创 webpack4 文档（入门） - 第九章 - targets
因为 javascript 可以运行在服务端和客户端，所以 webpack 有多目标构建方案。注意：webpack 的 target 属性和 output.libraryTarget 这两个是没有联系的。使用index.jsconst fs = require('fs');const path = require('path');console.log(fs.toString());console.log(path.toString());console.log('run in node')
2021-04-27 23:22:15
534
原创 webpack4 文档（入门） - 第七章 - module
在模块化编程中， 通常以“模块”为单位来编写应用程序，这种编程方式便于维护、测试和发现问题。在 web 端，模块化的支持姗姗来迟，许多模块化编程工具相继涌现，来解决模块化编程问题，webpack 便是其中一种工具。通常，一个 module 模块就是指一个文件中导出的内容，webpack 会将这些 module 打包成一个或多个 chunk 。
2021-04-18 23:15:41
498
原创 【小程序】用户授权
open-dataopen-data 是一个内置组件，用于显示用户头像和昵称等信息。<open-data type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data>wx.getUserInfo2.10.4 之前需要做兼容，wx.getUserInfo 改版后不会弹出授权弹窗，如果已授权，则可调用成功，否则获取匿名用户个人信息，如果是在插件中调用且未授权则调
2021-04-11 22:07:17
175
原创 webpack4 文档（入门） - 第六章 - configuration
因为 webpack 的配置是由 JS 文件编写的，所以配置文件的编写是很灵活的， webpack 会根据“规定的属性”去处理配置文件。 使用 require 引入模块； 使用 JS 流程控制语句； 抽取常用的值为变量和常量； 编写和执行函数来生成配置的一部分；在合适的时候使用以上这些特性。如果技术允许，下面这些做法是不太提倡的。使用 webpck CLI 时，访问 CLI 的参数，如 –env；使用了不确定的值，造成多次打包的结果不一致，违反了幂等性；在一个文件中编写了很长.
2021-04-11 18:34:37
111
原创 webpack4 文档（入门） - 第五章 - plugins
plugin 是 webpack 的“脊柱”， 可以在 webpack 的配置中添加 plugin 的配置可以增强 webpack 的构建功能， webpack 本身也是由一系列的 plugin 构成。plugin 可以完成 loader 不能完成的其他任务。剖析 webpack 中的 plugin 是一个 JS 对象，它拥有 apply 方法，这个方法会被 webpack 编译器调用，它可以访问整个编译的生命周期。 ConsoleLogOnBuildWebpackPlugin.jsconst p
2021-04-11 17:11:40
105
原创 webpack4 文档（入门） - 第四章 - loaders
Loaders 可以用来处理一个 module 的代码，当需要导入或加载一个模块时，可以使用 loader 来预处理它。loader 类似其他构建工具中的任务，为前端项目构建步骤提供了强有力的方法。比如，它可以将 TypeScript 的模块转换为 JavaScript 的模块，将图片转为内联的 data URL等等，Loaders 还允许你从 JS 模块中导入 CSS 。安装 loader# 需安装 yarnyarn add css-loader ts-loader -D或npm instal
2021-04-03 23:52:26
307
原创 webpack4 文档（入门） - 第三章 - 出口
多入口单出口webpack.config.js：var path = require('path');module.exports = { mode: 'development', entry: { entry1: ['./index1.js', './index2.js'], entry2: ['./index3.js', './index4.js'] }, output: { filename: 'bundle.js'
2021-04-02 00:04:20
168
1
原创 webpack4 文档（入门） - 第二章 - 入口 （含多页应用示例）
1.简单入口语法webpack.config.js：var path = require('path');module.exports = { entry: './index.js', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }}是下面这种形式的简写webpack.config.js：var path = require('path')
2021-03-28 19:58:13
125
原创 JS p28 ~ p37
const用 const 声明一个不会被循环修改的变量是可以的，这对 for-of 和 for-in 循环特别有意义。for (const key in { a: 1, b: 2 }) { console.log(key);}// a, bfor (const key of [1, 2, 3, 4, 5]) { console.log(key);}// 1, 2, 3, 4, 5每次循环都定义了一个 key 常量并且给它初始化了值，因为这里每次循环都创建了一个块作用域，所以
2021-03-28 14:28:07
64
原创 F-One 2021/03/17 面试
一轮（电话面）先问简历中的项目，问在项目中做了些什么，用到了哪些技术。然后问了一些基础题：1.JS 的数据类型有哪些？在 ES5 中有 6 种，分别是：Boolean 、Number 、String 、Object 、Null 和 Undefined ，在 ES6+ 中新增了一种 Symbol 类型。2.var，let，const 的区别？1.var 声明的变量作用范围在函数级作用域，let 和 const 声明的变量作用范围在块级作用域；2.var 声明的变量可以被提升到函数体的头部（只能提升
2021-03-27 17:57:18
161
1
原创 【小程序】实战：路由环路和表单验证
需求（学生分数录入系统）流程图：需求内容（前端模拟数据）：1.进入小程序，首页是 A 页面，如果用户已登录则“已登录”高亮，未登录则“未登录”高亮，点击去列表跳到 B 页面；2.进入 B 页面，提供有文本为 “1” 和 “2” 的按钮，点击1按钮筛选出年龄小于18随的学生信息，点击2按钮筛选出分数不大于79的学生信息，并且在”新增”上方显示信息的条数，点击“新增”按钮后，如果用户未登录跳到 C 页面，如果用户已登录则跳到 D 页面；3.进入 C 页面，点击登录可以记住登录状态，然后跳到 D 页面
2021-03-21 19:10:19
148
1
原创 【小程序】组件数据状态记录（类似路由复用）
场景利用微信小程序实现一个自己的期刊放映器，期刊包含音乐和文章两种。说实话这里有点不合常规，正常情况下，应该音乐和文章是分开的。父组件页面是这么写的：<z-music wx:if="{{type===1}}" image="{{image}}" src="{{src}}" content="{{content}}"/><z-essay wx:else image="{{image}}" content="{{content}}"/><z-nav bind:on
2021-03-14 18:07:38
147
原创 【小程序】[接口更新提示] 若需要小程序在退到后台后继续播放音频,你需要在 app.json 中配置 requiredBackgroundModes
该报错不印象小程序运行，如果想要消除该错误，可在 app.json 中添加如下配置：{ "pages": [ ], "requiredBackgroundModes": ["audio"]}参考链接：http://xcx.kuai8.com/news/2972.html
2021-03-13 20:28:05
1896
原创 【小程序】Error: 执行自定义预览前预处理命令失败
TypeScript 开发小程序时预览报错TypeScript 开发小程序无法预览，改一下 tsconfig.json 的配置。"exclude": [ "node_modules", "$node_modules"]参考链接：https://jingyan.baidu.com/article/2c8c281d1412f44108252add.html...
2021-03-09 22:06:16
1345
原创 webpack4 文档（入门） - 第一章 - 概念
概念webpack 是一个服务于 JS 应用程序的静态模块文件打包器，它在打包的时候，会为应用程序生成依赖图，依赖图和应用程序中的模块一一映射，可以利用它来生成一个或多个打包文件。从 webpack4 开始，一般不需要配置文件，但是想要灵活打包自己的应用，还是需要指定配置文件，默认是 webpack.config.js 。入口（Entry）对应配置文件中的 entry ，它指定了 JS 应用程序的打包入口，每个入口对应一个 chunk 。出口（Output）对应配置文件中的 output
2021-03-08 23:01:10
423
原创 npm 和 yarn
npm 和 yarnnpm 常用命令CommandDescriptionnpm search <keyword>列出带有关键字的包的列表npm ls列出安装包的列表npm config list列出配置项npm config set <key> <value>设置配置项的值npm config get <key>获取配置项值npm config delete <key>删除配置项的值
2021-03-07 18:23:05
265
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人