webpack官方提供了两大模块，一个是核心的webpack，一个是webpack-dev-server扩展模块。而文件监听功能是webpack模块提供的。

搜索引起无法收录你的网页，因为展示的数据都是在浏览器端异步渲染出来的，大多数爬虫无法获取到这些数据。对于复杂的单页应用，渲染过程计算量大，对低端移动设备来说可能有性能问题，用户能明显感知首屏的渲染延迟。

在实际应用中一个完整的系统不会把所有的功能都做到一个网页中，因为这会导致网页性能不佳。实际的做法是按照功能模块划分成多个单页应用，每个单页应用生成一个HTML文件。之前我们解决了自动化生成HTML文件，接下来继续改造上一节的例子：

在事件项目中，一个页面常常有很多资源要加载，举出一个实战中的例子要求如下： 项目采用ES6语言加react框架； 给页面假如google analytics， 这部分代码需要内嵌进head标签里去。 给页面假如Disqus用户评论， 这部分代码需要异步加载以提升首屏加载速度。 压缩和分类JavaScript和css代码，提升加载速度。 以下是发布到...

TypeScript是JavaScript的一个 超集，主要提供了类型检查系统和对ES6语法的支持。但不支持新的API。目前没有任何环境支持运行原生的TS代码，必须通过构建把它转换成JavaScript代码后才能运行。

Babel可以方便的完成以上两件事情， Babel是一个JavaScript编译器，能将ES6代码转为ES5代码，让你使用最新的语言特性而不用担心兼容问题，并且可以通过插件机制根据求灵活的拓展。在babel执行编译的过程中，会从项目根目录下的.babelrc文件读取配置，其内容大致如下：

如果采用导出一个Object来描述webpack所需配置的方法需要写两个文件。一个用于开发环境，一个用于线上环境。再在启动时通过webpack --config webpack.config.js指定使用哪个配置文件。

webpack的整体配置结构 之前说过每个配置项的具体含义，但是没有描述他们所处的位置和数据结构，下面统一描述下： {代码...}

JavaScript中变量是松散类型，这样它只在特定的时间内用于保存一个特定的值。由于不存在定义某个变量必须要保存何种数据类型的规则，变量的值和其数据类型可以在脚本的生命周期内改变。

JavaScript的应用场景越来越多，从浏览器到Node.js，这些运行在不同环境的JavaScript代码存在一些差异。target配置项可以让webpack构建出针对不同运行环境的代码。target可以是以下之一：

上一章介绍过DevServer可以用来提高开发效率，它提供一些配置可以改变DevServer的默认行为。要配置DevServer除了在配置文件里通过devServer传入参数外，还可以通过命令行参数传入。注意只有在通过DevServer去启动webpack时配置文件里devServer才会生效，因为这些参数所对应的功能都是DevServer提供的，webpack本身并不认...

所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事情（通常是一个异步操作）。从语法上说，Promise是一个对象，从他可以获取异步操作的消息。

webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。

Module module的配置如何处理模块。 配置Loader rules 配置模块的读取和解析规则， 通常用来配置loader， 其类型是一个数组， 数组里每一项都描述了如何去处理部分文件。 配置一项rules大致通过以下方式： {代码...} 例子： {代码...} 在loader需要传入很多参数的时候，我们还可以通过一个object来描述，如： {代码...} ...

webpack在寻找相对路径的文件时会以context为根目录，context默认为执行启动webpack时所在的当前工作目录。如果想改变context的默认配置，则可以在配置文件中这样设置：

看了网上一个教程，做些记录，从头学习一下webpack~关于安装之类的就不介绍了，首先了解下核心概念。感觉首先知道这些概念还是挺重要的。 核心概念 Entry：入口，webpack执行构建的第一步从Entry开始，可以抽象成输入。 Module：模块，在webpack中一切皆模块，一个模块对应着一个文件，webpack会从配置的Entry开始递归找...

关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白，这次决定一探究竟。在组件构建中，通常有一类功能需要被不同的组件公用，此时就涉及抽象的概念，在React中我们主要了解mixin和高阶组件。

React是以组合组件的形式组织的，组件因此彼此相互独立。组件中会有3种不同的可能性：父组件向子组件通信、子组件向父组件通信、没有嵌套关系的组件之间通信。

在React中，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件。受控组件中，组件渲染的状态与它的value或者checked相对应。React通过这种方式消除了组件的局部状态。React官方推荐使用受控组件。

Virtual DOM在内存中是以对象的形式存在，如果想要在这些对象上加事件就会比较简单。React基于Virtual DOM实现了一个合成事件层，我们所定义的事件会接受到一个合成事件对象的实例。不会存在IE浏览器兼容性的问题，同样支持事件冒泡机制。

目前在做一个个人网站，写了一半没有数据填充，也不知道写啥了，就顺带学习下mockjs这个东西，官网上主要介绍它是一个可以随机生成各种类型数据，拦截ajax请求等优点。接下来就近距离结束下mockjs吧！

React不是完整的MVC/MVVM框架，它专注于视图层，提供清晰，简洁的视图层解决方案。听起来和模板引擎很像，但是React又是一个包括view和controller的库。React不像其他框架提供很多复杂的概念和繁琐的API，它以Minimal API Interface为目标，只提供组件化相关的非常少量的API.

上面这部分代码在不同的上下文对象中重复使用identify()和speak()，不用针对每个对象编写不同版本的函数。如果不使用this，那就需要给identify()和speak()显示传入一个上下文对象。

如上，当URL的hash部分（指的是#后的部分）变化后，<App>会根据this.state.route来渲染不同的<Child>。现在看起来很直观，但是当你的路由结构复杂，项目变的比较庞大的时候，这种方法可能就不太适合了。我们看下在使用react-router后的编码结构：

开发者工具可以通过F12按键打开。可供选择的还有，你可以通过使用NW.js的API以编程的方式打开开发者工具win.showDevTools().

使用流行的技术栈（例如PHP）去写一个聊天应用传统意义上是比较难的。这样涉及到了服务器的轮询，跟踪时间戳，而且应该是比较慢的。Socket解决了大多数的实时聊天方案，在客户端和服务端提供实时的双向通道。这就意味着服务端可以向客户端推送消息。当你发送一条消息，服务端可以获得然后推送到其他连接的客户端。

nw.js是基于chromium和node的（Chromium 是 Google 的chrome浏览器背后的引擎，其目的是为了创建一个安全、稳定和快速的通用浏览器。国内的大部分双核浏览器都采用Chromium内核）。它可以让我们直接从浏览器中调用node模块，而且也可以使用web开发技术在你的应用中。此外，还可以轻松的把web应用打包到本地应用。

继承基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数，原型对象和实例对象的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，实例对象包含一个指向原型对象的内部指针。假如我们让原型对象等于另外一个构造函数的实例，那么此时的原型对象将包含一个指向另外一个...

建立lesson02项目，内容和上节lesson01一致，当用浏览器访问[链接]:8080/index.html时，修改任一html、css、js、图片文件，页面都会自动刷新。

注：在github上看到一篇比较好的webpack入门教程，本人也是为了加深印象以此记录。奉上原文地址：[链接]。 目标 建立一个lesson1项目，在项目中创建html, css, js， 图片等静态文件，编写webpack配置文件，然后生成如下页面。 要求 使用require引入jQuery， 切页面中药使用jQuery操作DOM. 输入npm run build能正确打包静...