一个优雅的 wabpack + react 脚手架 : react-starter

一个优雅的 wabpack + react 脚手架 : react-starter

去年 8月份 开始接触 react，而后开始使用 webpack 。

通过 几个月的摸索，加上参考一些 github 上别人的代码，整理了一个本身 用着还算舒服的，而且目录优雅的 webpack 前端开发架构。

欢迎 star ，互相学习
https://github.com/qilei0529/...

Create-react-app

刚学react 的时候是想找一个方便 新建一个 react 开发环境。
找到了一个 叫 create-react-app 的 工具，特别好用。
GitHub - create-react-app

她有我须要的大部分功能，不过想本身修改点东西的时候比较麻烦，由于她是一个npm 包。因而就有了相似的想法。

vuex webpack

后来 在接触 vuex 官方 代码 example 的时候，找到了一些灵光一现的写法。

GitHub - vuejs/vuex

发现 vuex 的webpack 写法相对于 create-react-app ，解决了一些的问题，如：

• 目录更加优雅 - 打包的脚本文件都在一个叫build 的目录下，我我的是个比较代码洁癖的人。

• 根据不一样环境 有不一样的 webpack.config

• 多项目输出

理想的 react + webpack

我须要的 react + webpack 开发环境 的基本功能有

• 支持 es6 语法

• 重载，热加载功能

• stylus

• 多项目支持

• 样式分离

• 打包

固然后期 还想加入一些 其余功能

• 单元测试 - 相似 e2e

• 代码评分 - 检查代码质量

多项目支持

由于有的时候 一个环境里有多个项目，而且但愿不用改 webpack 配置文件，根据目录自动添加项目

这个特性 参考了一下 上面 vuex -webpack 里的写法，
实现原理是 遍历 目录下的文件夹，若是文件夹下面含有 app.js 存在，就新建一个跟目录名同样的打包输出文件，相似一个项目，这样作的好处是，新增项目的时候，不须要再修改 webpack.config 文件了。是否是很是方便？ ?

样式分离

看到好多webpack 项目 都是直接把样式 打包在js里，说实话我有点不太喜欢这样，虽说这样少个请求，但总以为不够优雅。

强迫症吧，找了一个 webpack 插件，把样式 根据项目名分离出来，用的时候引用同名 样式就能够了。很是好用。

我没有作css mudules ，这个能够根据本身喜欢来添加，很是简单。

打包

我目前所处的公司，发布是这样的，把现有项目 打包压缩到一个 叫 release 目录，固然还须要通过各类 混淆，路径替换。
最后 将 release 包压缩成 tar 包，进行发布。

我使用gulp 来打包，打包功能有：

• 引用文件 hash ( 把文件名 hash 掉 )

• css min prefix ( css 压缩)

• html combo useref（ 合并引用文件）

• replace map ( 相对路径替换成绝对路径 )

打包完后： 能够直接在 打包目录运行html 查看 打包是否成功。

使用方法

git clone 一下代码
  npm install

  npm run dev

  npm run clean 
    npm run build:webpack
    npm run build:gulp

欢迎交流