一個優雅的 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

歡迎交流