首页 > 代码库 > webpack+react+antd 单页面应用实例
webpack+react+antd 单页面应用实例
webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了!
对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React。React入门最好的实例-TodoList
自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了。学习过程中还会接触到很多新的东西,比如ES6、webpack,过程艰辛谁人懂,见坑填坑慢慢来。今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给大家,希望能让读者少踩一些坑!
本文看点
实际项目效果
:最终你只需要在本地启一个服务,就能看到运行效果。webpack的配置
:项目实战中常用的插件和配置方法。React用法
:React在MVC(模型Model-视图View-控制器Controller)层面上主要扮演了视图的作用。我们可以学习它在项目中到底该如何使用。React-router配置
:单页面应用(SPA)离不开路由,我们可以学习在项目中React-router如何配置。ES6语法
:我们会用到一些在项目中常见的ES6语法。antd的使用
:蚂蚁金服出的一款基于React的框架,我们可以学习如何去使用。
项目效果
项目代码已经上传至github,项目代码github地址。大家把代码下载下来之后,跟随以下步骤即可在本地看到效果。
-
首先安装node环境。
-
全局安装webpack
npm install webpack -g
-
安装项目依赖
npm install
-
开发模式,启动本地服务
npm run dev
至这一步成功后,在浏览器输入
localhost:8888
就能看到如下图的效果了。 -
在build文件夹下打包
npm run build
webpack配置
基于React的项目配合webpack来打包管理最合适不过了。但是不学不知道,一学吓一跳,webpack的学习TM复杂了,各种报错,各种坑,就是webpack让我在学习的过程中一度想要放弃。然而过来人告诉你,坚持就是胜利!
学会怎么配置webpack,是独立管理项目的第一步。每个用webpack管理的项目都有一个webpack.config.js
文件,先来看看这个项目的webpack.config.js
文件:
‘use strict‘;
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
devtool: ‘eval-source-map‘,
entry: {
main: ‘./src/entry.js‘, //唯一入口文件
vendor: [‘react‘] //这里是依赖的库文件配置,和CommonsChunkPlugin配合使用可以单独打包
},
output: {
path: ‘./build‘, //打包后的文件存放的地方
filename: ‘main.js‘, //打包后输出文件的文件名
publicPath: ‘http://localhost:8888/build/‘ //启动本地服务后的根目录
},
module: {
loaders: [
{ test: /\.js$/, loader: "jsx!babel", include: /src/},
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css!postcss")},
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("style", "css!postcss!sass")},
{ test: /\.(png|jpg|gif)$/, loader: ‘url?limit=819200‘}
]
},
babel: {
presets: [‘es2015‘, ‘stage-0‘, ‘react‘],
plugins: [‘transform-runtime‘, [‘import‘, {
libraryName: ‘antd‘,
style: ‘css‘
}]]
},
postcss: [
require(‘autoprefixer‘) //调用autoprefixer插件,css3自动补全
],
devServer: {
// contentBase: ‘./src/views‘ //本地服务器所加载的页面所在的目录
port: 8888,
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
plugins: [
new ExtractTextPlugin(‘main.css‘),
new CommonsChunkPlugin({
name: ‘vendor‘,
filename: