讲到这里，我们基本上就可以迅速搭建一个简单的web项目，但不得不提的是webpack loader。它是我个人认为相比于其他模块加载更牛X的地方，将它用于react的开发，结合react与生俱来的优越性能，两者天衣无缝的配合简直就是黄金组合。
总的来说webpack loader可以实现：
可以将React JSX语法转为js语句
React开发中支持ES6语法
支持通过import来直接引入css、less、sass甚至是图片
支持css中引用的图片大小在某一大小范围之内直接转为BASE64格式
。。。。。等等等
为了能够让以上功能奏效，我们要先安装对应的：
babel-loader
npm install babel-loader --save-dev
css-loader
npm install css-loader --save-dev
less-loader
npm install less-loader --save-dev
style-loader
npm install style-loader --save-dev
url-loader
npm install url-loader --save-dev
而具体的实现，我们只要在webpack的配置文件中加入module属性里的loaders：
var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], output: { path: path.resolve(__dirname, './build'), filename: 'https://www.jb51.net/bundle.js', }, module: { loaders: [{ test: /\.jsx?$/, loader: 'babel' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, loader: 'style!css!less' },{ test: /\.(png|jpg)$/, loader: 'url?limit=25000' }] } };
通过指定文件后缀来执行对应的loader操作，我们甚至可以轻松的引入其他类型的文件，最后所有被引入进来的文件都会统统打包到bundle.js中去！
开发环境下的优化
在开发React组件的代码中，在webpack的帮助下我们都是通过require(‘react')的方式引入ReactJS，默认的require()方法会在webpack打包的时候去遍历ReactJS及其依赖。试想下，如果我们还引入了其他的库，例如jQuery、react-router、moment等，require都会以同样的方式去遍历，这会大大增加打包的时间。这显然会影响到开发的效率。
为了能够尽可能的加速打包过程，我们应该重写它的行为，鼓励在开发中使用依赖的压缩版本
假如我们只引入了react，我们可以这样修改webpack.config.js:
var path = require('path'); var node_modules = path.resolve(__dirname, 'node_modules'); var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js'); var config = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], resolve: { alias: { 'react': pathToReact } }, output: { path: path.resolve(__dirname, './build'), filename: 'https://www.jb51.net/bundle.js' }, module: { noParse: [pathToReact], loaders: [{ test: /\.jsx?$/, loader: 'babel' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, loader: 'style!css!less' },{ test: /\.(png|jpg)$/, loader: 'url?limit=25000' }] } }; module.exports = config;
resolve属性里的alias用来告诉webpack，当引入react时，试图去匹配压缩过的react；
而module中的noParse则是告诉当webpack尝试去解析压缩文件时，这种行为是不允许的。
当然啦，细心的你可能会发现当引入更多的库时，这样写多少会显得有点冗余，为此下面有个更加优雅的写法：
var path = require('path'); var node_modules_dir = path.join(__dirname, 'node_modules'); var deps = [ 'react/dist/react.min.js', 'react-router/dist/react-router.min.js', 'moment/min/moment.min.js' ]; var config = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], resolve: { alias: {} }, output: { path: path.resolve(__dirname, './build'), filename: 'https://www.jb51.net/bundle.js' }, module: { noParse: [], loaders: [{ test: /\.jsx?$/, loader: 'babel' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, loader: 'style!css!less' },{ test: /\.(png|jpg)$/, loader: 'url?limit=25000' }] } }; deps.forEach(function (dep) { var depPath = path.resolve(node_modules_dir, dep); config.resolve.alias[dep.split(path.sep)[0]] = depPath; config.module.noParse.push(depPath); }); module.exports = config;
瞬间biger起来了，待加以修饰之后，让我们更加便捷高效的享受React与Webpack带来的乐趣吧。