利用React-router+Webpack快速构建react程序

本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序，下面话不多说，感兴趣的可以一起学习学习。

初始化项目

我们先创建个空文件夹，然后初始化 package.json,填写一些基本信息。

rush:bash;"> $ npm init

接下来我们开始安装依赖项，我的 package.json 的依赖项如下

rush:js;"> "devDependencies": { "babel": "^5.5.6","babel-core": "^5.5.6","babel-loader": "^5.1.4","history": "^1.13.1","react": "^0.13.3","react-hot-loader": "^1.2.7","react-router": "^0.13.3","webpack": "^1.12.6","webpack-dev-server": "^1.12.1" }

运行命令:

rush:bash;"> $ npm install

项目创建好后，我们接下来创建一些必要的文件和目录；

rush:bash;"> $ mkdir js css && touch index.html webpack.config.js

webpack

webpack 是一款模块处理器，他会将你所有的代码打包成静态文件，放到你的开发的App中。

打开webpack.config.js，然后添加下面的代码:

rush:js;"> var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server',"./js/app.js" ],output: { path: __dirname + '/build',filename: "bundle.js" },module: { loaders: [ { test: /\.js?$/,loaders: ['react-hot','babel'],exclude: /node_modules/ },{ test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader'},{ test: /\.css$/,loader: "style!css" } ] },plugins: [ new webpack.NoErrorsPlugin() ] };

这份文件大概有四个配置项entry,output,module,plugins.

entry:指定打包的入口文件，每有一个键值对，就是一个入口文件。

output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键替换,例子中的/build/bundle.js便是生成的文件。

resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全.

module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会进行处理。这里我们使用了react-hot 和 babel。babel-loader是我们使用ES-6进行开发时用于生成JS文件。 最后我们生成了一个style.css仅仅做个例子，告诉我们如何引入样式文件，实际上我们可以加载诸如sass-loader这样的加载器。

loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装。

plugins: 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js。

NoErrorsPlugin: 定义代码出现错误时的时受否自动重新加载。

这个时候我们再package.json中加入script 字段，

rush:js;"> "scripts": { "start": "webpack-dev-server --hot --progress --colors","build": "webpack --progress --colors" }

这个时候我们输入一个npm start命令时候我们会启动一个webpack server这个时候你可以访问localhost:8080/webpack-dev-server/#/;如果你使用npm run build时候可以将文件自动生成到bulid/下。

接下来我们新建index.html文件

rush:xhtml;"> <Meta charset="utf-8">