webpack的配置

1. 介绍：

Webpack是当下最热门的前端资源模块化管理和打包工具。详细见官网

2. 安装：

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。但通常我们会将 Webpack 以及相关依赖以这种方式安装，如下：

# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev
# 安装react.js依赖（i是install的简写，-S是--save的简写）
$ npm i react react-dom -S

剩余的依赖组件参照我源码中的package.json的依赖添加就好。最终，我们得到的package.json应该如下图：确保红框中的内容一样即可。

3. 配置

现在我们已经安装好了依赖，下面我们需要先把项目的目录建好：

.
├── node_modules  #  npm install 安装的东西都跑着里面来了
├── src  
    ├── components
        ├── app.js  # react组件
    ├── styles
        ├── main.styl  # stylus文件（类似于sass）
    ├── entry.js  #  入口js文件
├── index.html  # 入口页面
├── package.json  #  项目描述文件（内有相关依赖）
└── webpack.config.js # webpack配置文件

然后我们在webpack.config.js中添加配置：

module.exports = {
  entry: [
    "./src/entry.js"
  ],output: {
    path: './out/',filename: "bundle.js"
  },module: {
    loaders: [
      { test: /\.js[x]?$/,loader: "babel-loader?presets[]=es2015&presets[]=react",include: /src/},{ test: /\.css$/,loader: "style!css"},{ test: /\.styl$/,loader: "style-loader!css-loader!stylus-loader"},{ test: /\.(png|jpg)$/,loader: 'url?limit=8192'}
    ]
  }
}

配置文件将我们的入口文件entry.js打包输出到 ./out/bundle.js，我们直接在页面index.html中引入bundle.js就好了。

<script src="./out/bundle.js"></script>

不懂得话可以参考webpack的文档：webpack-usage 和 webpack-loader。关于/src目录下的文件内容可以直接到源码中查看。然后就可以小试牛刀啦，在终端中输入：

$ webpack

然后我们看到我们的目录下多了个./out/bundle.js文件，然后我们在浏览器打开目录下的index.html文件可以看到内容并alert('success')那么恭喜你，第一步圆满完成！

React如何双向绑定

todoMvc-2step源码
 todoMvc-2step演示
上一章主要说了下react+webpack的环境搭建，这一章主要讲一下如何双向绑定。对vue和angular略有了解的都知道，这两个框架都是支持双向绑定的，而react是单向绑定的，知乎有一篇关于单向绑定和双向绑定可以拓展一下：单向数据绑定和双向数据绑定的优缺点，适合什么场景。下面分析如何具体实现：
进入我们的app.js文件，在之前我们搭建环境的时候已经安装了react相关的依赖以及babel编译工具，所以我们可以直接在这里使用ES6、JSX语法。

1. 引入react核心内容

import React from 'react'
import ReactDOM from 'react-dom'

其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能。

2. 生成组件

先介绍react三个比较重要的知识点：
1.ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。举个例子：

ReactDOM.render(
        <h1>Hello,world!</h1>,document.getElementById('example')
);

上面代码将一个 h1 标题，插入 example 节点。
2.JSX 语法
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是JSX 的语法，它允许 HTML 与 JavaScript 的混写，上面的<h1>Hello,world!</h1>，就是使用了jsx语法。
3.组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。举个原文链接：https://www.f2er.com/react/304694.html

React+webpack+Antd从0到1开发一个todoMvc