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

首先我们看一下我们完成后的最终形态：TodoMvc
：

TodoMVc

学习必要条件：略懂node.js，略懂ES6，然后你的电脑必须安装有较新版本node，没有的同学赶紧安装。
好了，废话不多说，直接开始。

第一部分源码：todoMvc-1step

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应该如下图：

   
   
   

   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就好了
   
   。不懂得话可以参考webpack的文档：webpack-usage 和 webpack-loader
   关于/src目录下的文件内容可以直接到源码中查看。
   然后就可以小试牛刀啦，在终端中输入：
   $ webpack
   然后我们看到我们的目录下多了个./out/bundle.js文件，然后我们在浏览器打开目录下的index.html文件可以看到内容并alert('success')
   

   

   todoMvc-step1

那么恭喜你，第一步圆满完成！
React+webpack从0到1开发一个todoMvc（二）
React+webpack从0到1开发一个todoMvc（三）
React+webpack从0到1开发一个todoMvc（四）
React+webpack从0到1开发一个todoMvc（五）