最近朋友圈被《头号玩家》刷爆了，斯皮尔伯格一个资深电影导演，把对过去经典的致敬，对未来的憧憬浓缩在这一部电影中，可以说让观众燃了起来。 观望整个前端开发，不断的演化，发展迅速。前端开发从最开始切页面, 前端自动化构建工具日新月异，从最初的Grunt,Gulp到现在前端项目可以说…

同构应用是指写一份代码但可同时在浏览器和服务器中运行的应用。 搜索引擎无法收录你的网页，因为展示出的数据都是在浏览器端异步渲染出来的，大部分爬虫无法获取到这些数据。 对于复杂的单页应用，渲染过程计算量大，对低端移动设备来说可能会有性能问题，用户能明显感知到首屏的渲染延迟。 为了…

1. 什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2. webpack核心概念 En…

近期发布了 webpack 4.0.0 的 beta 版本,如果想了解和之前版本的区别，不妨先自己搭建一个webpack的简单应用体验一下。 在bundle.js中，生成一个字执行函数，把要打包的js定义为实参，传入到自执行函数当中。 在package.json中 配置 "de…

1. 前言 以前本系列教程的其中一篇文章 13. 生产环境 vs 开发环境 有写过如何处理开发和线上环境的配置的差异性问题，之前我们是用一个环境变量 NODE_ENV=production，这个环境变量是放在命令行中，作为命令行的一部分，比如 NODE_ENV=producti…

这节我们来讲一个比较重要的内容，就是如何打包图片，这也是很多人问的一个问题。 我们首先在网站上加个图片，就在 css 里加，加个背景图。 你要确保 src/images 下有 logo.png 这张图片（随便在网络上找一张）。 只要找到适合的 loader 来处理扩展名为 pn…

本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 简单来说，它其实就是一个模块打包器。 如果像以前开发时一个html文件…

本周精读的是 webpack4.0 一些变化，以及 typescript 该怎么做才能最大化利用 webpack4.0 的所有特性。 前段时间尝试了 parcel 作为构建工具，就像农村人享受了都市的生活，就再也回不去了一样，发现无配置真是前端构建工具的大趋势，用起来非常方便快…

webpack入门，常用loader、plugin的使用及优化配置。 注册所有配置的插件，让插件监听webpack构建生命周期的事件节点，以做出对应的反应。