使用webpack+react开发框架构建你的第一个DEMO

webpack admin 暂无评论

此文章将通过一个简单的实例,带领你使用webpack打包工具+react开发框架构建一个简单的小DEMO

开发之前,你需要首先了解一下几点:

webpack:

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack-dev-server:

在webpack中有一个在开发时很好用的功能,热加载(Hot-replace),在react开发中,结合上react-hot-loader插件,开发工作将会变得更棒:更改代码之后,你甚至都不需要去刷新你的浏览器,界面就会自动刷新。但是,要使用这一功能的话,我们就需要使用webpack-dev-server。webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端,客户端根据消息作出响应。

react-router:

在react开发中,react-router是由官方维护的,唯一可选的路由库。它通过管理 URL,实现组件的切换和状态的变化,开发复杂的应用几乎肯定会用到。

babel:

Babel是一个JavaScript编译器。默认情况下,babel自带了一组ES2015语法转化器。这些转化器可以让你现在就使用最新的JavaScript语法,而不需要等待浏览器提供支持。本文要讲的开发例子中,就使用到了ES6以及部分ES7所提出的一些新规范,所以需要使用babel来进行转化。

一、配置package.json文件

首先建立项目文件夹,在该项目文件夹目录下执行npm init命令,然后一直回车到底,生成package.json文件,接下来再进行详细的配置。

package.json

1.png

这里需要说一下scripts字段以及devDependencies字段。在scripts字段下第一个命令"start": "webpack-dev-server --hot --progress --colors"表示执行npm start命令时,会执行后面的命令,即用webpack-dev-server启动服务, --hot表示热替换配置,--progress表示显示进度,--colors表示配置输出的颜色。第二个命令build表示执行npm run build的时候,会使用webpack进行打包操作。

二、配置webpack.config.js文件

上一步打包的时候,所有的配置工作都是在webpack.config.js文件中进行的。所以接下来我们来完善webpack的相关配置。

webpack.config.js

2.png

entry:入口配置,这里我进行的是多页面入口文件的配置,如果是单页面的话可以这样来进行配置:

3.png

path是webpack输出地址,取绝对路径;
publicPath是webpack-dev-server启动服务时在内存中文件生成的地址。
filename:这里多页面入口文件配置需要加上[name]。
loaders:使用loader对一些文件进行相应的处理。
test:使用正则匹配要处理的文件。
exclude:排除不处理的目录。
loader:要使用的loader。
...(其余相关配置已写在代码注释中)

三、完善入口页面

在项目根目录下简历index.html以及index1.html表示两个入口页面。

index.html

4.png

index1.html

5.png

在根目录下新建app目录,新建index.js以及index1.js文件。

index.js

6.png

index1.js

7.png

这里我们在index.js文件中使用了react-router,简单介绍一下它的一些配置及简单的用法。
导入路由:

8.png

配置路由信息:

9.png

路由跳转页面设置:

10.png

path是跳转路径,component中的是跳转路径过后要展示出来的react组件。具体的详细用法可以参考npm官网的介绍,这里就不多说了。

到这里框架搭建基本完成,缺的只有文中所引用的第三方组件了,如果您感兴趣的话,可以参考github,将项目down下来,再进行研究,我也会继续完善这个简单的框架,添加更多的组件进去,方便开发。

成功搭建后的演示:

webpack+react.gif

转载请注明:React教程中文网 - 打造国内领先的react学习网站-react教程,react学习,react培训,react开 » 使用webpack+react开发框架构建你的第一个DEMO

喜欢 ()or分享