一个优雅的 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

欢迎交流