02 2018 档案
摘要：前段时间一直在基于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工程项目。 纯前端资源配置 完整工程项目可
阅读全文
摘要：fetch是web提供的一个可以获取异步资源的api，目前还没有被所有浏览器支持，它提供的api返回的是Promise对象，所以你在了解这个api前首先得了解Promise的用法。参考阮老师的文章 那我们首先讲讲在没有fetch的时候，我们是如何获取异步资源的： 关于XMLHttpRequest的更
阅读全文
摘要：解决方案： 只是换了一种引入方式，解决了 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服务器从源服务器上拉取对应数据，进而更新本地
阅读全文
摘要：模块标准 CommonJS CommonJS 有三个全局变量 module、exports 和 require。但是由于 AMD 也有 require 这个全局变量，故不使用这个变量来进行检测。 如果想要对外提供接口的话，可以将接口绑定到 exports （即 module.exports） 上。
阅读全文
摘要：http://code.ciaoca.com/javascript/exif-js/demo/
阅读全文