react 画廊 webpack1

在上一章呢,我们通过yeoman ,react ,webpack ,generator,正式开始搭建了我们的项目基本结构,也跟大家一起过了一遍自动生成的相关文件,但其中最能体现现代web组件化开发思路的基础框架webpack 我们却没来得及聊,这一劫,我们就来深入了解一下,webpack .
上一节呢,我也提到了,gulp ,Browserify grunt 均受到了webpack 的威胁,那他们之间到底有什么差异性呢?
举个形象的例子,我们把写项目的过程,比作一个用积木搭房子的过程,
Browserify给我们封装了一个又一个这样的小积木块,有圆角的,有直角的,长的短的,尖的,那怎么把这样一个又一个的积木快速地搭建成房子呢?则需要我们自己来搭,需要我们用grunt 或者是gulp ,一个task ,一个task ,地去构建 ,类似于,合并,检验,压缩 ,等这样子的流程,最后形成一所房子,
不得不说的是,grunt和gulp 它们都很伟大,但是这样的配置过程,实在是太耗时了,但是webpack的思想,就不太一样,你说你想要一所房子,那webpack给你的直接就是一所房子,就是类似于我们已经用积木搭建好的房子,他自身就包含了构建流程,webpack假设了很多事情,比如说你需要把相关文件从源文件目录,移动到目标目录 ,你需要在commonjs ,amd,等方式下,使用各种js库,等等,那就爱如提供的房子并不是你想要的,你还是需要做一些修改,这就用到了webpack 的配置文件,
不要一提到配置文件,你就觉得不好,心想,我们费了好大劲才从grunt 迁移到了gulp ,就是因为更青睐gulp ,接近nodejs 的语法的使用方式,不喜欢grunt配置文件的方式,
这里呢,它并不是一个概念,grunt 你需要自己配置的步骤,还是太多了,而webpack呢,是基于对你 目的精准预测下的 配置系统,
打开我们的src -> components -> main.js
它的页面中引入css的方式,引入图片的方式,居然跟common.js引入其他js文件的方式一样,使用require指令,common.js规范呢,规定一个单独的文件,就是一个模块,也就是说我们的main.js 就是一个模块,每一个模块就是一个单独的作用域,也就是说,在这个,文件里边,我们定义的,变量react ,imgurl ,当然还包括函数和类,他们都是私有的,对其他文件是不可见的,那如果相对其他文件 可见,怎么办呢? 怎么暴露,我们这个模块呢? 通过module.exports = GalleryByReactApp .将我们希望的暴露的内容暴露出去,这个对象的所有属性和方法都可以被其他文件导入,其他文件导入我们这个文件的方式呢,也是通过require (“GalleryByReactApp .js”),我们看到引入资源的方式是如此的简单,并且webpack会智能地根据我们引入的资源文件的大小,来决定最终应该以什么样的方式来 发布使用这个资源,这里呢,我们运行一下grunt 的任务 ,叫做grunt build :
clean dist copy dist 把相应的资源文件打包输出到,dist文件夹,多了一个main.js