cag2050 - 博客园

Webpack4 的 Tree Shaking：babel-loader设置modules： false，还是设置"sideEffects": false，待确定

摘要： Webpack4 的 Tree Shaking：babel loader设置modules： false，还是设置"sideEffects": false，待确定 babel loader设置modules： false，https://www.cnblogs.com/cag2050/p/10086 阅读全文

posted @ 2018-12-12 12:01 cag2050 阅读(1649) 评论(0) 推荐(0)

没有了CommonsChunkPlugin，咱拿什么来分包（译）

摘要： webpack 4 移除 CommonsChunkPlugin，取而代之的是两个新的配置项（optimization.splitChunks 和 optimization.runtimeChunk）。详细介绍：https://github.com/yesvods/Blog/issues/15 阅读全文

posted @ 2018-12-12 10:52 cag2050 阅读(226) 评论(0) 推荐(0)

splitChunks. cacheGroups 里面的 maxInitialRequests 含义

摘要： entry文件请求的chunks不应该超过此值（请求过多，耗时）出处：https://ymbo.github.io/2018/05/21/webpack%E9%85%8D%E7%BD%AE%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2/ %E4%B8%89%E3%80%8 阅读全文

posted @ 2018-12-12 10:37 cag2050 阅读(1364) 评论(0) 推荐(0)

vue-loader v15、vue-loader v14及之前版本，配置css modules的区别

摘要： vue loader v15 配置css modules：是在 css loader 里配置官方文档：https://vue loader.vuejs.org/zh/migrating.html css modules 代码示例：https://github.com/cag2050/vue_cl 阅读全文

posted @ 2018-12-11 16:25 cag2050 阅读(6225) 评论(0) 推荐(0)

preload 与 prefetch 的区别

摘要： Preload 浏览器会在遇到如下link标签时，立刻开始下载main.js(不阻塞parser)，并放在内存中，但不会执行其中的JS语句。只有当遇到script标签加载的也是main.js的时候，浏览器才会直接将预先加载的JS执行掉。 Prefetch 浏览器会在空闲的时候，下载main.js, 阅读全文

posted @ 2018-12-11 14:58 cag2050 阅读(615) 评论(0) 推荐(0)

1. docker 在 macOS 中的架构 2. 在macOS系统中，docker pull 下来的镜像存储在哪里？

摘要： docker 在 macOS 中的架构: 在macOS中，docker的实现跟在其它Linux系统中略有不同，在其它Linux系统中，操作系统本身就是docker容器的宿主机，docker镜像都是直接存储在宿主机本身的文件系统中，比如我们通过docker info命令可以看到docker的根目录是：阅读全文

posted @ 2018-12-11 10:48 cag2050 阅读(9449) 评论(0) 推荐(0)

apt-get update 与 apt-get upgrade 的区别

摘要：总而言之，update是更新软件列表，upgrade是更新软件；所以，这两命令都是一块用，update后再upgrade。 update 是更新 /etc/apt/sources.list 和 /etc/apt/sources.list.d 中列出的源的地址,这样才能获取到最新的软件包 apt ge 阅读全文

posted @ 2018-12-10 16:51 cag2050 阅读(853) 评论(0) 推荐(0)

docker 学习资料

摘要： docker 学习资料学习资料 | 网址 | Docker 教程（菜鸟教程）| http://www.runoob.com/docker/docker tutorial.html docker 仓库网址 | https://store.docker.com/ 阅读全文

posted @ 2018-12-10 14:42 cag2050 阅读(200) 评论(0) 推荐(0)

webpack报错：Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"?

摘要： webpack报错：原因： babel core和babel preset env依赖被替换为@babel/core和@babel/preset env，因为新版本的Babel7中对官方提供的依赖使用了命名空间@babel 解决：在.babelrc文件或在webpack.config.js文件中阅读全文

posted @ 2018-12-08 14:08 cag2050 阅读(15843) 评论(0) 推荐(1)

Webpack 的 Tree Shaking

摘要：为什么要使用 Tree Shaking？当从某文件模块中导出（某一个或几个变量、函数、对象等），然而这个文件模块还有许多其它（我们这次并不需要）的导出，webpack会不管三七二十一简单粗暴的将整个模块包含进来，使得我们最终打包的文件里有了许多不需要的垃圾。这就到了tree shaking出手的地阅读全文

posted @ 2018-12-08 10:46 cag2050 阅读(867) 评论(0) 推荐(0)

webpack 相关插件及作用（表格）

摘要： webpack 相关插件及作用： table th:first of type { width: 200px; } table th:nth of type(2) { width: 140px; } 插件 | 默认启用 | 作用 | | UglifyJsPlugin | production模式时阅读全文

posted @ 2018-12-07 11:50 cag2050 阅读(610) 评论(0) 推荐(0)

启用 webpack 的模块热替换特性

摘要：启用 webpack 的模块热替换特性：注意，必须有 webpack.HotModuleReplacementPlugin 才能完全启用 HMR。如果 webpack 或 webpack dev server 是通过 hot 选项启动的，那么这个插件会被自动添加，所以你可能不需要把它添加到 web 阅读全文

posted @ 2018-12-07 11:36 cag2050 阅读(188) 评论(0) 推荐(0)

DefinePlugin插件

摘要：这个插件允许你创建全局常量用于编译时解析。如果设置mode："production",webpack默认会设置"process.env.NODE_ENV": JSON.stringify("production")。注意因为直接文本替换，所给的属性值必须包括引号，要这么做JSON.stringif 阅读全文

posted @ 2018-12-06 16:49 cag2050 阅读(1268) 评论(0) 推荐(0)

babel-loader和webpack UglifyJS一起使用时console的问题

摘要：一起使用babel loader和webpack UglifyJS时，babel会优先处理一遍代码，编译后的代码才进入webpack进行打包和优化操作。出处：https://www.tangshuang.net/3666.html 阅读全文

posted @ 2018-12-06 16:22 cag2050 阅读(369) 评论(0) 推荐(0)

uglifyjs-webpack-plugin 插件，drop_console 默认为 false（不清除 console 语句），drop_debugger 默认为 true（清除 debugger 语句）

摘要： uglifyjs webpack plugin 插件，drop_console 默认为 false（不清除console语句），drop_debugger 默认为 true（清除 debugger 语句） https://github.com/webpack contrib/uglifyjs web 阅读全文

posted @ 2018-12-06 15:47 cag2050 阅读(6745) 评论(0) 推荐(0)

读《精通正则表达式（第三版）》笔记

摘要：字符组与多选结构的区别：一个字符组只能匹配目标文本中的 , 而每个多选结构自身都可能是完整的正则表达式，都可以匹配任意长度的文本。多选结构后面如果没有量词（？、、+），可以去掉因此：等价于问：：匹配一个不是x的字符，还是匹配一个不是xxx的字符？答：元字符作用于紧邻的字符，因阅读全文

posted @ 2018-12-06 10:22 cag2050 阅读(141) 评论(0) 推荐(0)

vue cli 3.x 设置4个空格缩进

摘要： vue cli 3.x 设置4个空格缩进： 1. 文件中，修改为 2. 文件添加一行：示例项目：https://github.com/cag2050/vue_cli_3.x_template 阅读全文

posted @ 2018-12-05 19:14 cag2050 阅读(4630) 评论(1) 推荐(0)

正则表达式学习资料

摘要：正则表达式学习资料学习资料 | 网址 | 正则表达式教程（菜鸟教程） | http://www.runoob.com/regexp/regexp tutorial.html 正则表达式30分钟入门教程 | https://deerchao.net/tutorials/regex/regex.h 阅读全文

posted @ 2018-12-05 16:40 cag2050 阅读(169) 评论(0) 推荐(0)

windows10 修改host文件

摘要： https://jingyan.baidu.com/article/425e69e6e479a2be15fc16e1.html 阅读全文

posted @ 2018-12-03 19:40 cag2050 阅读(171) 评论(0) 推荐(0)

git stash 的用法

摘要： https://segmentfault.com/a/1190000002554160 阅读全文

posted @ 2018-11-29 14:25 cag2050 阅读(150) 评论(0) 推荐(0)

focus、input、keydown、keyup、change、blur方法的差异

摘要： focus、input、keydown、keyup、change、blur方法的差异： https://blog.csdn.net/yiifaa/article/details/52372022 blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会先后触发chang 阅读全文

posted @ 2018-11-28 13:21 cag2050 阅读(2383) 评论(0) 推荐(0)

webpack 的入口（Entry）、输出（Output）

摘要：入口（Entry）入口定义了我们的应用代码开始执行的那个文件，webpack从这个文件开始打包。你能定义一个入口点（常见于单页应用 Single Page Application），或者多个入口点（常见于多页应用 Multiple Page Application）。定义一个入口点就生成一个c 阅读全文

posted @ 2018-11-26 17:46 cag2050 阅读(391) 评论(0) 推荐(0)

webpack 入口：entry

摘要：定义一个入口点就生成一个chunk。如果你只是用字符串的方式定义了一个入口点，其就被命名为main。如果你用对象的方式定义多个入口点，其就被命名为入口对象中的键值。下面两个例子是等价的：阅读全文

posted @ 2018-11-26 17:45 cag2050 阅读(161) 评论(0) 推荐(0)

style-loader、css-loader、mini-css-extract-plugin 区别

摘要：项目 | 区别 | css loader | 处理 css 文件 style loader | 把 js 中 import 导入的样式文件代码，打包到 js 文件中，运行 js 文件时，将样式自动插入到` 阅读全文

posted @ 2018-11-26 16:51 cag2050 阅读(2895) 评论(0) 推荐(0)

css 兼容性问题，整理

摘要： css 兼容性问题，整理： css 兼容性问题 | 说明 | `` | 在chrome下，是不能输入非数字的字符的；但是在火狐63.0.3（2018.11.22日mac最新版），可以输入非数字字符，但是会有红色边框提示阅读全文

posted @ 2018-11-22 16:16 cag2050 阅读(157) 评论(0) 推荐(0)

webpack 中，loader、plugin 的区别

摘要： loader 和 plugin 的主要区别： 1. loader 用于加载某些资源文件。因为 webpack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。这就需要对应的loader将资源转化阅读全文

posted @ 2018-11-15 11:52 cag2050 阅读(5070) 评论(0) 推荐(1)

webpack 4 知识点

摘要：相应Github地址：https://github.com/cag2050/webpack4_demo css loader 让我们能在javascript代码中导入css文件，但这还不能让css起作用。我们还需要 style loader 把这些样式代码加载到浏览器中（注：就是将样式自动插入到` 阅读全文

posted @ 2018-11-14 17:06 cag2050 阅读(178) 评论(0) 推荐(0)

webpack 4 学习资料

摘要： webpack 4 学习资料资料 | 网址 | webpack 中文版 | https://webpack.docschina.org/configuration/ webpack 4 教程 | https://segmentfault.com/a/1190000016602351 英文原版：ht 阅读全文

posted @ 2018-11-14 14:19 cag2050 阅读(155) 评论(0) 推荐(0)

webpack 4：默认配置

摘要： webpack 4：默认配置 entry 默认: （注意：路径必须带上）； output 默认最后路径: （注意：路径必须带上）； mode 默认：'production' 可选值：production、development、none https://webpack.docschina.o 阅读全文

posted @ 2018-11-13 21:03 cag2050 阅读(819) 评论(0) 推荐(0)

webpack 4 升级点

摘要： webpack 4 升级点：默认entry为./src,默认output为/dist sideEffects 在webapck2开始支持ESModule后，webpack提出了tree shaking进行无用模块的消除，主要依赖ES Module的静态结构。在webapck4之前，主要通过在.ba 阅读全文

posted @ 2018-11-13 19:27 cag2050 阅读(226) 评论(0) 推荐(0)

webpack 3 升级到 webpack 4，遇到问题解决

摘要：报错：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead 解决：将extract text webpack plugin插件更换为mini css extrac 阅读全文

posted @ 2018-11-13 19:22 cag2050 阅读(247) 评论(0) 推荐(0)

js对象的key类型

摘要： http://javascript.ruanyifeng.com/grammar/object.html toc2 对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），所以加不加引号都可以。如果键名是数值，会被自动转为字符串。如果键名不符合标识名的条件（比如第一个字符为阅读全文

posted @ 2018-11-10 17:19 cag2050 阅读(4777) 评论(0) 推荐(0)

webpack 学习资料

摘要： webpack 学习资料 webpack 学习资料 | 网址 | webpack 中文版 | https://webpack.docschina.org/configuration/dev server/ 阅读全文

posted @ 2018-11-09 11:16 cag2050 阅读(195) 评论(0) 推荐(0)

taro 消息机制

摘要： Taro 提供了 Taro.Events 来实现消息机制，使用时需要实例化它同时 Taro 还提供了一个全局消息中心 Taro.eventCenter 以供使用，它是 Taro.Events 的实例 https://nervjs.github.io/taro/docs/events.html 阅读全文

posted @ 2018-11-08 19:48 cag2050 阅读(2541) 评论(0) 推荐(0)

taro 最佳实践

摘要：对 JSX 支持程度补充说明： 1. 不能在包含 JSX 元素的 map 循环中使用 if 表达式 1. 不能使用 Array map 之外的方法操作 JSX 数组 1. 不能在 JSX 参数中使用匿名函数 1. 暂不支持在 render() 之外的方法定义 JSX 1. 不允许在 JSX 参数(p 阅读全文

posted @ 2018-11-08 17:55 cag2050 阅读(1893) 评论(0) 推荐(0)

taro 组件的外部样式和全局样式

摘要：自定义组件对应的样式文件，只对该组件内的节点生效。编写组件样式时，需要注意以下几点： 1. 组件和引用组件的页面不能使用 id 选择器（ a）、属性选择器（[a]）和标签名选择器，请改用 class 选择器。 2. 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现阅读全文

posted @ 2018-11-08 17:35 cag2050 阅读(11406) 评论(0) 推荐(0)

taro 微信小程序原生作用域获取

摘要：在 Taro 的页面和组件类中，this 指向的是 Taro页面或组件实例。但是一般我们需要获取 Taro的页面和组件所对应的小程序原生页面和组件实例，这个时候我们可以通过 this.$scope 就能访问到它们。所以当调用一些 API 需要传入小程序的页面或组件实例时，可以直接传入 th 阅读全文

posted @ 2018-11-08 17:02 cag2050 阅读(3256) 评论(0) 推荐(0)

taro refs引用

摘要：创建 Refs Taro 支持使用字符串和函数两种方式创建 Ref： 1. 使用字符串创建 ref 2. 通过函数创建 ref（推荐）你也可以通过传递一个函数创建 ref, 在函数中被引用的组件会作为函数的第一个参数传递。如果是被引用的组件是自定义组件，那可以在任意的生命周期访问引用。不管在任何阅读全文

posted @ 2018-11-08 16:43 cag2050 阅读(1848) 评论(0) 推荐(0)

taro 列表渲染

摘要：元素的 key 在他的兄弟元素之间应该唯一数组元素中使用的 key 在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key key 的取值 key 的取值必须同时满足三个条件： 1. 稳定 2. 可预测 3. 唯一（相对于其他兄弟元素）阅读全文

posted @ 2018-11-08 16:24 cag2050 阅读(2485) 评论(0) 推荐(0)

taro 事件处理

摘要： https://nervjs.github.io/taro/docs/event.html Taro 元素的事件处理和 DOM 元素的很相似。但是有一点语法上的不同: Taro 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符阅读全文

posted @ 2018-11-08 14:53 cag2050 阅读(8922) 评论(0) 推荐(0)

导航

公告