Elm and Webpack

大部分的時候，我們用elm-make打包好就好，可是如果我們這個前端還需要其他css或是js的套件要怎麼辦？一個個讀很麻煩，elm-package又只有elm的而已，有沒有什麼好方法可以連同elm一起打包？

當然有啊

就是前端常用的打包工具webpack了。不過因為這個不是webpack的教學，所以一些webpack的基本常識就先假定大家都知道了。覺得要自己手種設定webpack有點麻煩？沒關係,
elm-community有很貼心的有一個叫：elm-webpack-starter。幫忙大家把開始設定的問題給處理好。

git clone https://github.com/moarwick/elm-webpack-starter my-elm-project
cd my-elm-project
rm -rf .git         # on Windows: rmdir .git /s /q
git init
git add .
git commit -m 'first commit'
npm run reinstall

這樣就設定好啦，就有一個elm with webpack的app了！他還會有elm-webpack-loader
的設定，如果你要手動的話，記得要有 elm-webpack-lodaer才可能在webpack內用elm

create-elm-app

社群裡面，除了用webpack
之外的，還有一個可以號稱是zero-configuration，直接讓你開工的create-elm-app。他也有一些script是和官方的不一樣，不過我覺得也很方便。譬如你要安裝就是： elm-app install <package-name> 要安裝其他javascript就直接用npm,
他會放在這個app的package.json裡

    my-app/
    ├── .gitignore
    ├── README.md
    ├── elm-package.json
    ├── elm-stuff
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo.svg
    │   └── manifest.json
    ├── src
    │   ├── Main.elm
    │   ├── index.js
    │   ├── main.css
    │   └── registerServiceWorker.js
    └── tests
        ├── Tests.elm
        └── elm-package.json

這個是如果你用create-elm-app的話的tree。也有內建debugger和test。官方的指令也都有相對應的alias:
elm-app start, elm-app install, elm-app test, 還有一個是 elm-app build 可以把在production放在build的資料夾裡。

其實這個的背後也是使用webpack來整理assets的。你可以在 ~index.js~裡：

import './main.css'; // Tell Webpack to pick-up the styles from main.css

個人在使用上覺得比起webpack-starter，create-elm-app來得更直覺好用些。

還有很多其他的設定，建議可以因你的需求而做調整，詳情可以看 readme
。我覺得很多小細節都有整理好。