随笔分类 - 构建工具
摘要：Vue 源码是选用了 rollup 作为 bundler ，看 Vue 的源码时发现： npm script 对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。 不同于其他的 library ， Vue 为什么要在最后的打包构建环节输出不同类型的包呢？接下来我们通过 Vue 的源码以及对
阅读全文
摘要：devtool devtool是webpack中config自带的属性只要使用就可以了不用安装 webpack官网的解释如下 当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bun
阅读全文
摘要：前段时间一直在基于webpack进行前端资源包的瘦身。在项目中基于路由进行代码分离，http://www.cnblogs.com/legu/p/7251562.html。对于公司内部的组件库，所有内容一次性加载源文件很大。比如登录主要就用了button和input,不需要打包table, tree这
阅读全文
摘要：项目升级为react-router4后，就尝试着根据官方文档进行代码分割。https://reacttraining.com/react-router/web/guides/code-splitting 在实际项目中，js,css文件默认通过webpack打包的话会很大，动不动就好几兆。 在实际场景
阅读全文
摘要：谈及如今欣欣向荣的前端圈，不仅有各类框架百花齐放，如Vue， React， Angular等等，就打包工具而言，发展也是如火如荼，百家争鸣；从早期的王者Browserify, Grunt，到后来赢得宝座的 Gulp， 以及独树一帜的 fis3, 以及下一代打包神器 Rollup ；在 browser
阅读全文
摘要：前言 在用 react-hot-loader v1.3 的时候有些深层组件不会很完美的热更新（可能是我使用有问题）。然后在 react-hot-loader 首页中看到 React Hot Loader 3 is on the horizon，便想换成这个，结果就开启了一周的踩坑之路... 模块依赖
阅读全文
摘要：官网是这么说的，翻译一下就是下一代JavaScript 语法的编译器。 作为前端开发，由于浏览器的版本和兼容性问题，很多JavaScript的新的方法都不能使用，等到可以大胆使用的时候，可能已经过去了好几年。Babel就因此而生，它可以让你放心使用大部分的JavaScript的新的标准的方法，然后编
阅读全文
摘要：webpack热更新配置 热更新，可以使开发的人在修改代码后，不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码，大大的缩短了构建的时间。 热更新一般会涉及到两种场景下面的使用，一个是项目属于纯前端资源的，另一种是node工程项目。 纯前端资源配置 完整工程项目可
阅读全文
摘要：解决方案： 只是换了一种引入方式，解决了 1，创建postcss.config.js文件，添加如下代码：（引入autoprefixer插件） 1 2 3 4 module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 versio
阅读全文
摘要：webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的配置文件(webpack.config.js) 这
阅读全文
摘要：要在开发和生产构建之间，消除 webpack.config.js 的差异。你可能需要环境变量。 可以使用 Node.js 模块的标准方式：在运行 webpack 时设置环境变量，并且使用 Node.js 的 process.env来引用变量。NODE_ENV 变量通常被视为事实标准（查看这里）。 w
阅读全文
摘要：让我们向项目中再添加一个模块 print.js： project print.js src/index.js 再次运行构建，然后我们期望的是，只有 main bundle 的 hash 发生变化，然而…… ……我们可以看到这三个文件的 hash 都变化了。这是因为每个 module.id 会基于默认
阅读全文
摘要：hash、chunkhash、contenthash hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地
阅读全文
摘要：http://code.ciaoca.com/javascript/exif-js/demo/
阅读全文
摘要：简介 Charles是在Mac下常用的截取网络封包的工具，在做iOS开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。Charles通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。 Charles是收费软件，可以
阅读全文
摘要：Optimizely:在线网站A/B测试平台是一家提供 A/B 测试服务的公司。A/B 测试能够对比不同版本的设计,选取更吸引用户眼球的那一款,从而带来更为优化的个人体验。让网站所有者易于对不同版本的设计和内容进行测试。 该公司的客户现已突破7000家，这些客户完成了超过50万次试验，令Optimi
阅读全文
摘要：前言 大家都知道，Sublime Text 安装插件一般从 Package Control 中直接安装即可，当我安装 node js 插件时候，直接通过Package Control 安装，虽然插件安装成功了，但是找不到配置文件 Nodejs.sublime-build 来更改一些配置 。于是去 h
阅读全文
摘要：三种情况:一、设置data-main，没配置baseUrl，以data-main的文件为基准；二、设置data-main，配置baseUrl，baseUrl以值以引用require.js的HTML为基准，require()的文件以baseUrl的值为基准；三、没配置data-main，以引用requ
阅读全文
摘要：$ git init // 初始化一个Git仓库$ git status // 查看仓库的状态$ git add . // 将所有修改添加到暂存区$ git add * // Ant风格添加修改$ git add *Controller // 将以Controller结尾的文件的所有修改添加到暂存区
阅读全文
摘要：静态资源前端加载器，用来分析页面中使用的和依赖的资源（js或css）, 并将这些资源做一定的优化后插入页面中。如把零散的文件合并。 注意 此插件做前端硬加载，适用于纯前端项目，不适用有后端 loader 的项目。因为不识别模板语言，对于资源的分析和收集，比较的粗暴！！！ 默认会把页面中用到的样式插入
阅读全文