最近刚换工作，一直想学一个比较实用比较火的mv*框架，刚开始学的ng，然而发现并不适合我这个渣渣- - 很尴尬，又转向了vue，vue的确比ng好入门一点，可是要是手动的打包(管理)你写的vue和html、css等好像很麻烦的样子，不仅我这么认为，很多大牛也是这么实现的，比如利用gulp，grunt，webpack，我也是借此机会吧这几个比较火的前端工具都熟悉了个遍，最后经过自己的摸索和咨询大神，选择了webpack+react(我也不知道为啥- - ).下面是关于webpack+react的入门小知识：
首先，你需要具备node基础，npm基础，es6基础，这些仅仅需要入个门就可以按照顺序附各个入门链接:
node：GitHub - alsotang/node-lessons: 《Node.js 包教不包会》
npm：npm 入门 - 基础使用 - 推酷 (最好把package.json里面的json对象里面的各个属性名的意义都搞一遍，以后方便理解)
es6：ECMAScript 6 扫盲 - 梦骑士的博客 - 博客频道 - CSDN.NET
如果你讲上面的都看了一遍，有了一点印象，那么咱们接着往下走。
到了这里，估计你也已经安装好了node，那么我们在安装webpack： npm -g --save-dev webpack（安装好的npm插件会在node目录下的node_modules文件夹下）
webpack是为了将写好的react的打包到你想要引入的JS文件，这里，这个JS文件是build.js
然后，假设咱们webpack+react的项目目录是这样的，如下图：
项目目录
文件目录结构
app是我们的react组件文件夹，index.jsx是主组件，将来会用webpack将index.jsx编译成build文件夹下面的build.js，下面的node_modules文件夹是你在该项目目录下面下载的node插件，index.html就不用多说了，package.json我个人理解就是一个队该项目的解释，里面有一些重要的东西，可以查看此网址：package.json字段全解 - 清箫的专栏 - 博客频道 - CSDN.NET，这里就不再赘述。webpack.config.js是使用webpack必须的一个配置文件，用来配置你运行webpack时候将要执行的东东。(上面的build文件夹和里面的build.js在没有运行webpack的时候是没有的，这里就不去除了)
下面来撸代码，由于咱们这个入门用的是es6所以，需要利用babel来转译一下，下载babel-preset-es2015，还需要下载一些东西，这里我就不复述了，直接上图：
需要的插件
这里没用其他的插件，例如自动生成html，webpack-dev-server，因为就是简简单单的入门，搞多了不太好的样子
接下来是webpack.config.js的配置，如下图：
webpack.config.js
这里面也可以require("path")来是路径变得更方便，不过还是为了简单，就不写了
解释一下：entry是webpack编译的入口路径，也就是说你想编译哪一个文件，就把哪一个文件的写到这里面，
output是webpack编译后的文件的存放地址，path是路径，filename是文件名称，记得要加后缀哦
module是webpack用到的加载器(也就是工具)，是一个数组，里面每一项都是一个json对象，其中test填写一个正则表达式，匹配后缀，这里匹配的是以.jsx或者.js结尾的文件，loader使用到的插件，query是插件的子功能。(这里我是这么理解的，不对的地方望指出)
好了，简单的webpack.config.js写好了，让我们来写react吧，先附图，如下：
react_jsx
里面的react和react-dom是必须的，用es的模块命令import....from来引入，之前的package.json已经下好了这两个插件，下面的是es6中的类，其实就是es5原型的语法糖，子类App继承了react的component，里面的es6语句就不再赘述。
render里面写的就是react的jsx语句直接return一个jsx语句，将html和js混写在一起的模板。this.props指向的是App插件的name属性的值。然后在html页面中的body里创建一个div，最后一句ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。第一个参数是模板，第二个参数是要插入的'目的地'。好啦简单的react写好了，下面我们在该项目下打开CLI，然后输入webpack，如果cli显示如下图所示内容，那么恭喜你，一个小小小小的webpack+react的demo写好了：
cli
那么build文件已经自动生成了，并且里面有了一个build.js文件，打开看看，是不是很神奇，然后创建在html内将build.js引入，用浏览器打开html，就会有如下图所示页面：
页面
本人实力有限，文笔不行，不过到了这里，你可能大概对webpack+react有了一个小小的认识了，接下来，让我们一起继续努力学习吧，加油哈。
网友评论