ES6+React+Webpack初步构建项目流程

         当我们打算使用Webpack构建工具，React和ES6来开发项目的时候，构建这么一套自动化的项目的流程见下：

 

第一步：webpack是一个基于node的项目，我们使用命令行对webpack进行全局的安装

npm install webpack –g。可以通过webpack  –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack，我们需要将webpack安装到当前的项目依赖中，在新建的文件夹下输入：npm init（安装webpack依赖，会在对应文件夹下生成package.json），然后使用npm install webpack –save-dev将webpack的模块添加到本地项目中。此时会生成一个本地的模块目录node_modules。如下图所示：

第二步：在新建的文件下目录下创建你的工程目录结构。为了演示react和es6，我这里需要展示一个背景色为橙色，只显示一段文字：hello！的工程。首先创建一个index.html，入口文件app.js，被引用的UI模块文件hello.js以及对应的样式文件style.css。目录结构如下所示：

 

第三步：这里定义的入口js文件app.js中可以使用es6中的import引用hello.js中的UI组件。同时也可以使用require来引入定义的style.css文件用来改变元素的样式属性。对应的在hello.js中可以使用react创建对应的功能模块的组件，并通过export导出接口给其他文件使用。

第四步：创建并使用webpack最重要的配置文件webpack.config.js。这个文件主要定义webpack构建工具识别的入口文件entry，出口文件output（这里的出口文件主要是用来被index.html中的script标签进行引用）以及webpack为了打包对应css，img，es6所需要的加载器loader。这里的webpack.config.js是webpack默认运行时加载的配置文件。

TIPS：这里为了加载使用各个loader，比如说css-loader，babel-loader，style-loader等等加载器，需要我们在开发项目之前进行安装。有两个安装方式：

A.     可以直接在命令行输入对应安装命令：npm install style-loader –save-dev之类

B. 直接在package.json中的devDependencies定义所需要使用的loader加载器名字，然后在命令行直接输入npm install进行对应loader的安装。

这里为了可以使用webpack的更具文件的改动直接自动刷新浏览器的功能，安装并使用了webpack-dev-server；注意在使用webpack-devserver的时候一定要在后面加上参数—hot和—inline才能达到自动刷新浏览器的目的。