前端工程化
fechild
这个作者很懒,什么都没留下…
展开
-
学习gulp的绝佳ppt
http://slides.com/contra/gulp#/1原创 2017-05-02 18:22:14 · 240 阅读 · 0 评论 -
webpack学习--模块解析(https://webpack.js.org/concepts/module-resolution/)
Module Resolution解析器是通过绝对路径来定位一个模块的类库,一个模块可以依赖另一个模块:import foo from 'path/to/module';// orrequire('path/to/module');依赖的模块可以来自应用程序,或者第三方库。解析器帮助webpack找到require/import语句所需要打包的代码包。webpack利用enhan...翻译 2018-07-25 10:10:05 · 746 阅读 · 0 评论 -
ssh key 创建步骤、git clone指定ssh key
一、什么是ssh key?ssh key是git远程服务器与本机通信所必须的密钥,每个git服务器对应本机上的一对密钥,包括私钥和公钥。存储位置为:~/.ssh二、为什么要生成ssh key?如果本机想要从远程服务器上拉取代码,必须将本机的公钥上传到远程服务器上。三、如何生成ssh key?可以用 ssh-keygen 来创建。该程序在 Linux/Mac 系统上由 SSH 包...原创 2018-06-26 18:38:55 · 10539 阅读 · 0 评论 -
从h5页面唤起相应app的方式总结
一、最新方法 // 如果是iphone,直接使用universal link if (/iPhone|iPod|iPad/g.test(navigator.userAgent)) { location.href = "//dpl.qyer.com/app/guide?act=" + this.strType + "Detail" + "&id=" + this.i...原创 2018-05-11 10:08:40 · 2736 阅读 · 0 评论 -
webpack代码分割(https://webpack.js.org/guides/code-splitting/)
Code Splitting代码分割 代码分割是webpack最令人信服的特性,这个特性允许你将代码分割为不同的部分,然后按需加载或者并行加载。它可以用于获得更小的打包文件、按照加载优先级控制资源,进而减少加载时间。(将原先集中到一个 output.js 中的代码,切割成若干个 js 文件,然后分别进行加载。原先只加载 output.js ,现在把代码分割到3个文件中,先加载 output...翻译 2017-08-08 11:36:28 · 689 阅读 · 0 评论 -
让charles可以抓到手机的https请求攻略
1.手机连上电脑的vpn(可以抓到http请求)2.点击后会弹出:3.手机浏览器进入chls.pro/ssl,跟着步骤安装证书4. 设置-通用-描述文件与设备管理-找到刚刚安装的证书-通过验证5.设置-通用-关于本机-证书信任设置-把刚才装的证书按钮打开(重要!!)6.在charles设置最后一项的意思是对所有端口号为443的请求都允许...原创 2018-01-04 14:19:20 · 3676 阅读 · 2 评论 -
webpack-生产环境最佳实践(https://webpack.js.org/guides/production/)
Production此篇文章介绍利用webpack构建线上版本的最佳实践。The Automatic Way一般来说,运行webpack -p命令。此命令相当于webpack --optimize-minimize --define process.env.NODE_ENV="'production'"命令。这条指令执行以下操作:》使用UglifyJsPlugin插件压缩文件》...翻译 2017-08-07 15:30:14 · 2170 阅读 · 0 评论 -
webpack学习系列二(https://webpack.js.org/concepts/entry-points/ 翻译)
Entry Points定义webpack configuration中的entry属性有很多方式,以下将阐述配置entry属性的几种方式。Single Entry (Shorthand) Syntax单一入口 简略写法webpack.config.jsconst config = { entry: './path/to/my/entry/file.js'};是以下写法的简略写法const ...翻译 2017-07-31 14:54:30 · 438 阅读 · 0 评论 -
webpack学习系列一(https://webpack.js.org/concepts/ 翻译)
概念webpack是现代js应用的模块打包器,当用webpack处理你的应用时,它递归的建立一个依赖图,依赖图中包含你的应用需要的所有模块,然后将这些模块打包成少量的包,通常是一个包,供浏览器加载。它是可配置的,你首先需要理解4个核心概念,entry入口、output出口、loaders加载器、plugins插件。这个文档将宏观讲述这些概念,同时,利用具体案例具体描述这些概念。Entry 入口we...翻译 2017-07-31 11:10:05 · 2869 阅读 · 0 评论 -
webpack学习系列三(https://webpack.js.org/concepts/output/)
OutputEDIT DOCUMENToutput配置告诉webpack如何将编译过的文件写入磁盘。虽然有很多中入口设置,但是只有一种ouput设置。Usageoutput最简单的设置如下,将包含有filename和path属性的对象赋值给outputwebpack.config.jsconst config = { outp翻译 2017-08-02 16:27:24 · 331 阅读 · 0 评论 -
webpack学习-shimming模块补充(https://webpack.js.org/guides/shimming/)
1.要解决的问题:往应用的每个模块里注入全局变量,即每个模块都能访问的变量,例如引入jquery方法:利用ProvidePlugin插件,例子如下:module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ]};翻译 2017-08-09 10:59:33 · 393 阅读 · 0 评论 -
webpack学习-缓存(https://webpack.js.org/guides/caching/)
Caching缓存我们已经利用webpack生成了可以发布上线的代码(/dist文件夹),一旦dist里的内容被部署到服务器上,客户端或者说浏览器将会访问服务器来获取站点上的资源。资源在服务器和浏览器间的传输过程是非常耗时的,这也是浏览器使用缓存技术的原因。利用缓存可以使得页面加载更快,但是当你需要更新最新的代码时,也会造成问题。这个教程将讲一些缓存的必需配置,它使得利用webpack翻译 2017-08-08 18:15:11 · 393 阅读 · 0 评论 -
webpack学习系列-lazy-loading (https://webpack.js.org/guides/lazy-loading/)
Lazy Loading懒加载,或者说按需加载,是优化网站或者应用的一个非常好的方式。这个实践本质上是将代码在逻辑点切割,当用户做了某些点击或者互动后,将需要的代码或者未来会需要的代码加载。这样做会加快应用的首屏加载,减少整个应用的资源加载量,因为一些代码块可能永远不会被加载。 Example project上节(代码分割)的例子将生成的js文件一分为二,只要引入的js文件...翻译 2017-08-08 15:46:19 · 1260 阅读 · 0 评论 -
webpack学习-tree shaking(https://webpack.js.org/guides/tree-shaking/)
Tree Shakingtree shaking指的是将js环境中的无用代码去除,或者叫按需引入。它依赖于es6的import/export模块。webpack2开始支持es6的module特性。Example假设main.js导出了2个函数,square和cube// This function isn't used anywhereexport function翻译 2017-08-07 16:05:23 · 222 阅读 · 0 评论 -
阿里云oss h5页面上传实践
一、目的:将手机端的图片或者视频上传至阿里云oss服务器,同时返回资源url二、原理:https://help.aliyun.com/document_detail/31988.html?spm=a2c4g.11186623.2.13.2e2e350aF5un5N发送合法的content-type为multipart/form-data的post请求到阿里云服务器。一个合法的请求如下,...原创 2018-12-25 10:20:53 · 4717 阅读 · 0 评论