当我们打算使用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才能达到自动刷新浏览器的目的。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。