redtmp / webpack-react-framework

一个完善的Webpack+React集成环境,支持模块热加载和Css热加载效果,并支持多页面入口的Webpack打包,并附加完整的config配置文件注释,可以方便的修改环境及配置

Webpack+React集成环境框架

一个完善的Koa+Webpack+React集成开发环境,实现了多页面应用入口,并附加很多实用组件

框架优点

• 支持多页面类型的React应用开发
• 实用Koa服务器进行构建,扩展性更强
• 分为开发环境(Dev)和上线(Prod)环境,可以自由选择并进行开发
• 支持React热加载,可以实现CSS及JS的热加载效果
• 附加Postcss工具,可实现Sass语法开发,自动填充CSS3兼容方案及CSS雪碧图的自动化构建
• 使用了CSS-Module技术,实现了样式的复用性和解决了样式污染

##使用的技术

• Webpack
• React
• Babel
• Koa
• PostCSS
• precss
• CSS modules
• autoprefixer
• webpack-dashboard

目录结构

开发目录结构:

├── dist  //资源文件目录
    ├── css //存放css文件
    │   ├── components //存放组件相关的css
 		│		└── common //存放公用的css文件
    ├── data //存放临时数据文件
    ├── img //存放图片目录
    ├── js  //存放所有入口的js文件(不要防止其他js)
    ├── plugins //存放其他非入口的js
    │   ├── components //存放组件相关的js
    │   └── lib //存放组件相关的js
    ├── scss //存放scss文件
    │   └── components
    └── tmpl //存放模板文件

使用方法

1.安装所需NodeJS模块

进入你该项目文件夹,并在CMD/终端中执行命令安装Node依赖包,这里有一个需要注意的问题,由于webpack中file-loader的图片处理路径无法满足CSS背景图片的路径变化,需要将根目录下的node_bak中的file-loader文件夹替换node_modules中的file-loader文件夹

npm install

2.创建入口及对应js文件

在src开发目录中创建HMTL页面,并在src/dist/js中创建一个同名js即可

3.设置相关配置参数

在./config文件夹中设置webpack.config.dev.js和webpack.config.prod.js文件中的配置

/**
  设置默认常用路径
**/
//srcDir为当前开发目录(默认:/src)
const srcDir = path.resolve(process.cwd(), 'src');
//assetsDir为当前建立目录(默认:/assets)
const assetsDir = path.resolve(process.cwd(), 'assets');
//读取入口的js文件目录(本目录只能对应页面的入口的JS,其他脚本需要写在/dist/plugins中)
const jsEntryDir = path.resolve(srcDir, 'dist/js');
//生成JS的目录地址(默认:)
const jsDir = 'dist/js/';
//生成css的目录地址(默认:)
const cssDir = 'dist/css/';

/**
  设置默认模块依赖及是否合并打包等设置
**/
//设置需要排除单独打包的插件
const singleModule = ['react', 'react-dom', 'jquery', 'Raphael'];
//是否合并打包其他组件模块
const libMerge = true;
//需要全局使用的组件,比如jquery,lodash等
const globalValue = {
    $: 'jquery'
};
//设置不需要使用的css目录
const excludeCss = ['dist/css/common', 'dist/css/components'];

4.开启热加载开发模式

进入你该项目文件夹,并在CMD/终端中执行命令开启开发模式,这时候会显示一个控制台,能够看到项目对应的反馈信息及问题

npm start

5.项目完成后进行打包压缩

进入你该项目文件夹,并在CMD/终端中执行命令执行打包压缩,会在根目录生成一个assets的文件夹,文件夹内为压缩后的项目代码

npm run build

其他框架特性内容介绍

1.PostCss工具

在框架中使用了PostCss的部分工具,主要为

• Precss 可以实现类似sass语法功能,所以该框架支持类似Sass语法的编写,例如:

/* before */

@for $i from 1 to 3 {
	.b-$i { width: $(i)px; }
}

/* after */

.b-1 {
	width: 1px
}
.b-2 {
	width: 2px
}
.b-3 {
	width: 3px
}

• postcss-easysprites 可以实现图表的自动拼接,例如:

/* before */

.arrowNext {
  background-image: url('dist/img/arrow-next.png#elements');
}
.arrowNext:hover {
  background-image: url('dist/img/arrow-next_hover.png#elements');
}
.arrowPrev {
  background-image: url('dist/img/arrow-prev.png#elements2');
}
.arrowPrev:hover {
  background-image: url('dist/img/arrow-prev_hover.png#elements2');
}

/* after */

.arrowNext {
  background-image: url(dist/img/elements.png);
  background-position: 0 0;
}
.arrowNext:hover {
  background-image: url(dist/img/elements.png);
  background-position: -28px 0;
}
.arrowPrev {
  background-image: url(dist/img/elements2.png);
  background-position: 0 0;
}
.arrowPrev:hover {
  background-image: url(dist/img/elements2.png);
  background-position: -28px 0;
}

更新记录

• CHANGELOG

License

MIT