使用webpack+react开发框架构建你的第一个DEMO-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

此文章将通过一个简单的实例，带领你使用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

这里需要说一下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

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

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