码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-22 19:30:06      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

         当我们打算使用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才能达到自动刷新浏览器的目的。

 技术分享

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

标签:

原文地址:http://blog.csdn.net/jsdchenye/article/details/51212536

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!