---
# System prepended metadata

title: ruby打包不行啦 請找專業的webpack打包

---

# ruby打包不行啦 請找專業的webpack打包
### 專業的webpack打包工具 加速效能

rails 不擅長打包，所以交給別人來做吧！

:::info
webpack -> 專門打包前端的工具, 有live reload的效果 VS code存檔畫面就會自動更新不用重新整理，可以加速執行效能

:::
**處理前端套件不要交給ruby做**
我們在```rails s``` ，連同打包，就是包山包海太忙了跑不快我們就給專業，
bin資料夾底下有個webpack-dev-server，
從終端機叫他來打包，再加開一個終端機視窗下指令開啟功能（雙開）
```$ bin/webpack-dev-server 專門打包```
打包開啟時，```rails s``` 會知道打包的部分有人接管了，就放手交給別人了

Q: 往後遇到好工具，是不是就要不斷加開終端機分頁？
A: 是啊有好工具幹嘛不用
Q: 那我們是不是要開爆終端機分頁...
A:是啊(燦笑) 但交給foreman 一次搞定
![](https://i.imgur.com/IG9A1PO.gif )

### 領頭獅foreman
ruby套件->一口氣啟動相關服務，啟動多個元件
[領頭獅foreman](https://rubygems.org/gems/foreman/versions/0.82.0?locale=zh-TW)
安裝都有好幾中方式，其中```bundle add ＋套件名字```
可以不用找版本，他會幫我用最新的
* ```$ bundle add foreman```
在Gemfile自動給的gem，依照個人喜好精準控制，看有沒有要搬家放在只有開發或測試，開發測試都要等等
若有搬家 記得要在```bundle install```
(foreman屬於上線不會用到的唷)
* 建立Procfile
像是工具總表一樣把所有工具敘述其中（此檔放在最外層哦）

![](https://i.imgur.com/p121DgN.png =500x)
* 啟動foreman 把剛剛的打包rails s先全部關掉
就可以執行啦```$foreman server``` or ```foreman s```


發現foreman localhost預設為5000
我們改回想要的3000吧
![](https://i.imgur.com/ZCk0RGz.png =500x)


### ---補充---
此外關於Procfile 是源自於heroku 

![](https://i.imgur.com/W6XuuEY.png =300x)
若遇到專案需要上推此平台，此時檔案中的Procfile會與heroku上預設的Procfile因同名而打架

不如起初自己檔案就不要命名為Procfile
改檔名Procfile => Procfile.dev

接下來會遇到狀況是無法執行foreman
因為找不到Procfile （我們改名啦Procfile.dev）
但事情還沒結束，用下圖做解說吧
![](https://i.imgur.com/0T934h9.png)


若要蓋一個.foreman檔案如下

![](https://i.imgur.com/hm7nPo0.png =450x)