初学教程3部分- 加入React的项目搭建

学习Webpack的过程可以用这样一句话描述：

始于Bundle，陷于React。

说老实话，如果不是深入学习React的原因，很有时候我们是不可能有机会对Webpack这一当前最热门的打包工具有如此深入的学习，这句话一方面反映了React技术栈对Webpack的依赖，另外一方面可以测证出React的Webpack构建的确不是那么easy?。。

本部分下面的配置文件和npm依赖可以直接作用在react项目中，但是我更建议我们一起搭建属于自己的一个React的脚手架，这个过程会很有趣?，会让我们对webpack有更深入、详细的了解。

必要

  1. 你已经看过了前面两个部分，确认自己对Webpack和常用配置有一些基本的了解。
  2. React项目的构建…当然需要对React的项目架构有一些了解，才能知道需要Webpack帮我们做什么。

使用 create-react-app 快速构建

create-react-app封装了很多构建react应用的最佳实践。你如果想快速构建和一个简单配置的小项目，它是非常好用的。

create-react-app一个最具有吸引力的特性是ejecting。它会替代掉原本的项目依赖，让你得到一个完整的webpack配置。

有个需要注意的问题，在你eject之后，你不能返回到基础依赖模式，你将不得不保持你设置的结果。

自己构建一个专属的React脚手架

确定编译环境和依赖包

    1. 开发环境：先进且稳定的Node.Js执行环境
    1. 依赖包管理：NPM包管理或者其它
  1.     npm init
    1. ES6和JSX编译工具：Babel，同时配置babelrc. 
  1.     npm install --save-dev balbel-cli babel-core babel-polyfill babel-preset-react babel-preset-es2015
    1. 开发环境配置：确定webpack的安装后，安装相关配置依赖包
  1. npm install --save-dev webpack webpack-dev-server babel-loader sass-loader style-loader css-loader react-hot-loader
    1. 配置文件书写：webpack.config.dev.js，存放在项目根目录
  1. var path=require('path');
  2. var fs=require('fs');
  3. var webpack=require('webpack');
  5. module.exports={
  6.     devtools:'cheap-module-eval-source-map',
  7.     entry:{
  8.         app:[
  9.             'webpack-hot-middleware/client'
  10.             './src/app'
  11.         ],
  12.         vendors:['react','react-dom','react-router']
  13.     },
  14.     output:{
  15.         filename:'[name].js',
  16.         publicPath:'/static/'
  17.     },
  18.     module:{
  19.         loaders:[{
  20.             test:/\.jsx?$/,
  21.             include:[
  22.                 path.resolve(__dirname,'src')
  23.             ],
  24.             loaders:['react-hot',src]//不刷新页面，只刷新变化的react组件
  25.         },{
  26.             test:/\.scss$/,
  27.             include:[
  28.                 path.resolve(__dirname,'src')
  29.             ],
  30.             loader:'style!css!sass?sourceMap=true&sourceMapContens=true'
  31.         }]
  32.     },
  33.     resolve:{
  34.         extensions:['','.js','.jsx','.scss','.css']
  35.     },
  36.     plugins:[
  37.         new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
  38.         new webpack.optimize.DedupePlugin(),
  39.         new webpack.DefinePlugin({
  40.             'process.env.NODE_ENV':JSON.stringify(process.env.NODE_ENV),
  41.             __DEV__:true
  42.         }),
  43.         new webpack.NoErrorsPlugin(),
  44.         new webpack.HotModuleReplacementPlugin()
  45.     ]
  46. }

为React配置Babel

关于在Webpack中使用Babel的要领，这里有一些很明确的React设置。

大多数React项目依赖一种叫JSX的模版格式。它是JavaScript的超集，可以让我们混入类XML语法。很多人在用起来很感觉非常的方便。

一些React的开发者使用一个称为Flow的语言来扩展我们附上代码注释。这种技术和React结合良好，但是我们不仅仅只能使用它。TypeScript是另一个可行的替代方案，可以和JSX同时工作。

Webpack的配置

Babel允许我们很容易地在React中使用JSX。有些人喜欢把他们用JSX书写的React组件用.jsx的后缀来命名。Webpack可以根据我们的意愿，基于我们的文件名来运行不同的语法规则。

Webpack提供了resolve.extensions的设置，可以让我们做这样的事情。如果你想允许引入import一个Button从‘./Button’，这个文件的名字叫Button.jsx，设置如下：

webpack.config.js

  2. const common = {
  3.     ...
  4.     resolve:{
  5.         extensions:['.js','.jsx'],
  6.     },
  7. };

loader配置是线性依次匹配的，而不是仅仅匹配/\.js$/，我们可以通过/\.(js|jsx)$/来延伸匹配到.jsx。

在webpack 1 中你必须使用 extensions:[‘’,’.js’,’.jsx’] 来匹配扩展的文件名。在Webpack 2中这不是必需的了。

Babel的配置

想要Babel能转译JSX，我们需要添加一个预设preset。安装它：

  1. npm i babel-preset-react --save-dev

你同时也需要连接预设到Babel配置，下面是简单的设置实例：

.babelrc

  1. {
  2.     "presets":[
  3.         [
  4.             "es2015",{
  5.                 "modules":false
  6.             }
  7.         ],
  8.         "react"
  9.     ]
  10. }

渲染一个React应用程序

为了让一个简单的React应用运行起来，你需要把它装载到一个DOM元素。html-webpack-plugin插件能够在这里派上用场。它可以结合html-webpack-template或者html-webpack-template-pug来获取更多的功能。你还可以提供一个自定义的模版。

你可以考虑下面的例子：

webpack.config.js

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const HtmlWebpackTemplate = require('html-webpack-template')；
  5. const common = {
  6.     ...
  7.     plugins:[
  8.         new HtmlWebpackTemplate,
  9.         title:'Demo app',
  10.         appMountId:'app',//生成可以安装的app
  11.         mobile:true,//缩放mobile页面
  12.         inject:false,//html-webpack-template
  13.     ],
  14. };
  16. module.exports = function(env){
  17.     ...
  18. }

现在有一个模版和一个DOM元素需要渲染，React需要传入参数，在那里渲染，渲染什么内容：

app/index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. ReactDOM.render(
  5.     <div>Hello world</div>,
  6.     document.getElementById('app')
  7. );

我们可以这段代码内混入我们的应用程序，取决于我们的口味，我们可以用index.jsx的文件名代替这个文件，但是引用index.js可能更容易被接受。

查阅 Configuring Hot Module Replacement with React 来学习如何设置Webpack和Babel有关React代码的热重载配置项。

优化性配置

React的Babel-Based优化

babel-react-optmize 实现了各种你想要尝试的React的优化。

babel-plugin-transform-react-remove-prop-types 是有用的，如果我们想从生产环境中移除 propType相关的代码。它也是允许组件作者在设置不同环境变量下能够正常生产代码。

按需加载

babel-plugin-import是一个用于按需加载组件代码和样式的babel插件。

  1. npm install babel-plugin-import --save-dev