React+webpack从0到1开发一个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应该如下图：

   确保红框中的内容一样即可。

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')

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

转载于:https://juejin.im/post/5a30fe626fb9a045263b95b1