新手也能轻松上手React、ES6、Webpack

原文标题：对于React、ES6、Webpack的简单理解

大水淹了江城，被迫进行了今年第二次封闭式开发；远离公司，不胜唏嘘，幻化成大雨，远方的人啊，愿你能出现在我梦里；靠！码农哪有时间做梦啊，倒床上就着了，眼睛一睁，又要继续码了。。。

做前端一年多了，睡前反省反省后发现：工作以html、css、js、jquery为主，伴有少量（HTML5、CSS3）；业余入门级Angular、React、ES6、Nodejs、自动化；那一晚，我又失眠了，为嘛牛逼的，我都只是入门级；想想我那小站点又是一个多月没更新了，技术面又窄，未来在哪里？宝宝心里苦啊；痛定思痛后，只有业余扣点时间用React和ES6改写小站的后台了，是的，博客战场模式又要开启了！

React：仅仅是UI、虚拟DOM、数据流；无疑是前端组件式开发的利器，太强大了，大家都知道，我什么都没说；我只知道我喜欢React就一个原因：我喜欢这种优雅的代码风格；为什么这么多人喜欢杨钰莹，因为总有人诗一般的活着！

去年试水React的时候，感觉还挺容易上手，这次一玩，才发现，不会点ES6不行啊，不会点Nodejs玩不起来啊！之前用Grunt、Gulp打包css、js，如今webpack霸屏了，什么都干，你懂的！话说用了webpack后我就真的相信webpack是最好的了；随便两行代码，webpack不uglify后就是700K，如果你像我一样傻，每次重启webpack，打包一次就相当于进入一次广告时间，你可以上趟厕所，整点吃的，喝的，凉快凉快；好吧，watch就不用每次等广告时间了；可能这些只是属于新手的抓狂吧；

如果你也是新手，如果你也为React、Angular、Nodejs这些牛逼的技术抓狂过，其实没关系，想想那些奇葩 需求，有时恨不得让你改框架源码的时候；再想想，其实技术本身并不难。。。

1、webpack小觑

webpack大而全，和静态资源相关的所有它都能干涉，当然，还能启动server；webpack主要以loaders和plugins处理各种静态资源；

loaders：

在React里会用到JSX、ES6、js，我统一将文件后缀使用.js，便于babel的配置：

npm install --save babel-loader
//
{
   test: /\.js?$/,
   exclude: /node_modules/,
   loader: 'babel',
   query: {
      presets: ['es2015', 'react']
   }
}

CSS、scss、iconfront字体文件：

npm install --save style-loader css-loader sass-loader url-loader file-loader
//
{
   test:/\.css$/,
   loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},{
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},
{test: /\.(woffwoff2)/,   loader: "url?limit=10000&minetype=application/font-woff&name=./[name].[ext]"},
{test: /\.(ttfeotsvg)/,    loader: "file?name=./[name].[ext]"},
{test: /\.otf/,    loader: "file?name=./[name].[ext]&minetype=application/font-otf"}

想将css独立出来的话：

npm install --save extract-text-webpack-plugin
//
var plugins=[];
var ExtractTextPlugin = require('extract-text-webpack-plugin');
plugins.push(new ExtractTextPlugin('./app-[hash].css?[hash]'));

处理图片：

npm install --save url-loader
//
{
   test:/\.(pngjpggif)$/,
   loader:'url-loader?limit=10&name=[name].[ext]'
}

多个loader通过！区分，同时接受查询参数以？连接，类似于用！区分多个url，比如：loader1?name=[name]-[hash].[ext]&limit=10000!loader2?xxx=xx；可以使用require语句加载loader，也可以通过配置中的正则表达式来绑定loader；

plugins：

我首先看重了html-webpack-plugin和assets-webpack-plugin还有上面的extract-text-webpack-plugin，因为牵扯到我挺感兴趣的一块：前后端的分离及自动化；

html-webpack-plugin会由entry的配置将入口文件所属的html文件作为模板，重新生成一个html文件，其中的静态资源都已根据配置打包好，貌似很不错哦！不过有两个问题，还没解决：（1）、如果静态资源和主站是各自独立的站点，而将html作为静态资源对待的话，主站有路由相关配置的话，好像有点扯不开了；要是只在本地开发这样配置，各自独立上线的话，跨域时本地不便于测试；（2）、页面上的图片路径没做处理，可能要求有点多了。。。（3）、将html作为模板对待了，那么如何include其他模板；由于这三个原因，暂时不敢说html-webpack-plugin很适用，特别是第一点；继续探索中。

var plugins=[];
var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins.push(new HtmlWebpackPlugin({
    template: './files/es6.html',
    filename: 'es6.html',
    title:'hhhhhh',
    inject: true,
    chunks:['entry1']//可以new多个html由entry区分
}));

使用webpack后，对文件的版本hash将变得非常简单：出口文件的name加上[hash]即可；可能现在来说，清除静态资源缓存最好的做法就是文件名hash了，注意不是加个后缀可以的；对于流量非常高的站点，即使等到三更半夜上线，如果仅仅加个后缀清缓存的话，也难免会出事，因为页面和静态资源同步时会有时间差，而在这个间隙有用户访问的话，页面出错的可能性就很大了；而文件名hash的方式就能很好的避免这个问题，由于每次改动后生成的文件名都不一样，上线并不是覆盖之前的版本，只是多了一个版本的文件，再上页面文件即使同步有时间差，要么访问旧版页面和旧版资源，要么访问新版页面新版资源，就不存在冲突了，这样服务器可以大胆的对静态资源开启永久强缓存，并且有利于回滚；至于静态资源由此产生的积压，交给运维处理吧！

使用html-webpack-plugin能很好的配合文件名hash，基于上面的小问题。。。

现在生成文件名hash很简单了，怎么对应页面一起改呢？

（1）、自己动手慢慢改去吧

（2）、页面由前端输出：生成map.json，根据这个配置读文件对应改资源引用的路径

（3）、页面由后端输出：生成map.json，后端读这个配置动态加载页面引用的资源路径

总之，就是要生成map.json，这里就简化了很多，因为不用管文件依赖了，webpack已将依赖文件打包到主文件里了；接下来就是读这个配置文件了，我也不知道，再探！。。。

由assets-webpack-plugin生成map.json：

var AssetsPlugin = require('assets-webpack-plugin');
plugins.push(new AssetsPlugin({
    filename: 'map.json',
    processOutput: function (assets) {
        return JSON.stringify(assets);
    }
}));

map.json大概这样：

{"entry1":{"js":"app-ed03f4fe.js","css":"app-6f7f3cda3d230d8fa897.css"}}

2、React、ES6小觑

配置好了webpack之后，开始React+ES6就不是什么难事了，除了以后会引进的Redux、Flux、Reflux会不好理解外，接下来可以一边React一边ES6了，慢慢来，两不误！说真的，修改state的时候太多了，所以熟悉React后引入Redux是很有必要的；

React里使用JSX语法，不用管了，babel编译；React里使用ES6，尽管用，babel帮你打到ES5；上面不是已配好webpack吗？babel-loader就是帮你干这个的；不过启动webpack时记得watch哦，不然得像我一样老是等广告时间；

不说Hello,world!

无论Angular还是React都提供了一种方式来实现组件化的开发，来扩展HTML标签的不足，这些组件更像是一种描述性的语言，对，可以非常语义化，比如：要一个3行5列的列表，<TableList rows=3 cols=5 data={TableDatas}/>；这样一个列表就出来了，是不是很爽！React仅仅是UI，我认为它是为组件化而生的，而且跨平台，跨终端；

我所想象的组件化是html标签已封装，css、js各自独立；当然要把对应组件的css也一起封装也是完全可以的，为什么要把css也独立呢？我们会用grunt-sass-contrib、gulp-sass、sass-loader，而这些工具已提供了对sass模块化很好的解决方法，比如sass的依赖有loadPath；而我们要做的就是像模块化js一样模块化css，然后在js里require或import该组件所需的css模块即可，因为我要的是用到多少css就加载多少css，最少化的重复，而如果一个组件对应一套css，就很难避免重用了，最后通过上述工具直接打包的css就是你页面所需的了；

我看到了React可以这么做，封装html、扩展标签，封装成组件，组件依赖css模块和js模块；比如登录界面：

import {React} from 'react';
import {ReactDOM} from 'react-dom';

import '../css/fonticons.css';
import '../css/components/login.scss';

import Login from './views/Login';

ReactDOM.render(<Login url={postUrl} />,document.getElementById('views'));

components是Web的未来，而现在是React！components一直吸引着无数前端的探索，以上只是个人初步理解，抛砖引玉，还在探索中。话说部分浏览器已实现了Web components，或许这只是颗启明星，指引着我们走向更美好的未来！

个人博客：花满楼 famanoder.com