本周六就是万众期待的腾讯 Web 前端大会了，小编这周激动得都睡不着，因为可以见到好多大牛，还可以跟微信群、QQ 群里技术聊得嗨的网友面基。下面小编就来介绍一下获取最佳参会体验的小 Tips。

原文链接

—— 以 webpack 文档部署为例子

Overview

Some friends and I have been running webpack-china for a few months.
After a few months effort, most doc translation job have also been done. We keep tracking the master and you will see Chinese version does not lag behind too much.

(pretty much the same and http2 is also applied)

原文链接

前言

React 的开发也已经有 2 年时间了，先从 QQ 的家校群，转成做互动直播，主要是花样直播这一块。切换过来的时候，业务非常繁忙，接手过来的业务比较凌乱，也没有任何组件复用可言。

为了提高开发效率，去年 10 月份也开始有意识地私下封装一些组件，并且于今年年初在项目组里发起了百日效率提升计划，其中就包含组件化开发这一块。

本文并不是要谈如何去写一个 React 组件，这一块已经有不少精彩的文章。例如像这篇 《重新设计 React 组件库》，里面涉及一个组件设计的各方面，如粒度控制、接口设计、数据处理等等（不排除后续也写一篇介绍组件设计理念哈）。

本文关键词是三个，工程化、快速和可靠。我们是希望利用工程化手段去保障快速地开发可靠的组件，工程化是手段和工具，快速和可靠，是我们希望达到的目标。

前端工程化不外乎两点，规范和自动化。

读文先看此图，能先有个大体概念：

原文地址
本文 start kit: steamer-react

为什么做直出

就是为了“ 性能”！！！
按照经验来说，直出，能够减少 20% - 50% 不等的首屏时间，因此尽管增加一定维护成本，前端们还是前赴后继地在搞直出。

除此之外，有些特定的业务做直出能够弥补前后端分离带来的 SEO 问题。像这次选取的腾讯新闻，大多数页面首屏其实都是直出的（但肯定不是 React 直出）。

原文地址

最近一个季度，我们都在为手 Q 家校群做重构优化，将原有那套问题不断的框架换掉。经过一些斟酌，决定使用 react 进行重构。选择 react，其实也主要是因为它具有下面的三大特性。

React 的特性

1. Learn once, write anywhere

学习 React 的好处就是，学了一遍之后，能够写 web, node 直出，以及 native，能够适应各种纷繁复杂的业务。需要轻量快捷的，直接可以用 Reactjs；需要提升首屏时间的，可以结合 React Server Render；需要更好的性能的，可以上 React Native。

但是，这其实暗示学习的曲线非常陡峭。单单是 Webpack+ React + Redux 就已够一个入门者够呛，更何况还要兼顾直出和手机客户端。不是一般人能 hold 住所有端。

2. Virtual Dom

Virtual Dom（下称 vd）算是 React 的一个重大的特色，因为 Facebook 宣称由于 vd 的帮助，React 能够达到很好的性能。是的，Facebook 说的没错，但只说了一半，它说漏的一半是：“ 除非你能正确的采用一系列优化手段”。

3. 组件化

另一个被大家所推崇的 React 优势在于，它能令到你的代码组织更清晰，维护起来更容易。我们在写的时候也有同感，但那是直到我们踩了一些坑，并且渐渐熟悉 React+ Redux 所推崇的那套代码组织规范之后。

原文链接

前言

将 babel 捧作前端一个划时代的工具一定也不为过，它的出现让许多程序员幸福地用上了 es6 新语法。但你就这么放心地让 babel 跑在外网？反正我是不放心，我就曾经过被坑过，于是萌生了研究 babel 代码转换的想法。本文不是分析 babel 源码，仅仅是看看 babel 转换的最终产物。

es6 在 babel 中又称为 es2015。由于 es2015 语法众多，本文仅挑选了较为常用的一些语法点，而且主要是分析 babel-preset-2015 这个插件（react 开发的时候，常在 webpack 中用到这个 preset）。

原文地址

前言

最近由于用着 html-webpack-plugin 觉得很不爽，于是乎想自己动手写一个插件。原以为像 gulp 插件一样半天上手一天写完，但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。首先是进入 how to write a plugin 看了一页简单的介绍。然后教程会告诉你，你需要去了解 compiler 和 compilation 这两个对象，才能更好地写 webpack 的插件，然后作者给了 github 的链接给你，让你去看源代码，我晕。不过幸好最后给了一个 plugins 的 API 文档，才让我开发的过程中稍微有点头绪。

how to write a plugin 这个教程还是可以好好看看的，尤其是那个 simple example，它会教你在 compilation 的 emit 事件或之前，将你需要生成的文件放到 webpack 的 compilation.assets 里，这样就可以借助 webpack 的力量帮你生成文件，而不需要自己手动去写 fs.writeFileSync。

原文链接

前言

本文不是 webpack 入门文章，如果对 webpack 还不了解，请前往题叶的 Webpack 入门，或者阮老师的 Webpack-Demos。

为什么要使用 Webpack

1. 与 react 一类模块化开发的框架搭配着用比较好。
2. 属于配置型的构建工具，比较用容易上手，160 行代码可大致实现 gulp400 行才能实现的功能。
3. webpack 使用内存来对构建内容进行缓存，构建过程中会比较快。

第 3 点我想稍微论述一下，如果看过我之前写的 《如何写一个 webpack 插件（一）》，会发现，webpack 会将文件内容存在 compilation 这个大的 object 里面，方便各种插件，loader 间的调用。虽然 gulp 也用到了流 (pipe) 这样的内存处理方式，但感觉 webpack 更进一步。gulp 是每一个任务 (task) 用一个流，而 webpack 是共享一个流。