LaravelMix4でdynamic importをするとcssファイルがemptyになる


# LravelMix4ではdynamic importをするとバグが起きる
https://github.com/JeffreyWay/laravel-mix/releases/tag/v4.0.0


>If your project heavily uses JavaScript dynamic imports, you may need to hold off until the release of webpack 5 early next year. There are known compile issues related to this that we cannot fix until then. Once webpack 5 is out, Mix will be updated shortly after. If you're unfamiliar with dynamic imports, then this very likely won't affect your project.

ピンポイントで遅延ローディングの部分だけバグっている…

※dynamic-importを使用した際に、コンパイル後のsassがemptyになるバグ

webpack5出るまで待てよと言われてる

→ 待てないので、laravel.mix.jsファイルを２つに分けて対応

※dynamic importがあるjsファイルとsassのtranceパイルを同じもので行うと起きるバグなので。

https://github.com/JeffreyWay/laravel-mix/issues/1887

## Vue 遅延ローディングルート
結合されて重いjsファイルを分割して、読み込みタイミングをずらす 
https://router.vuejs.org/ja/guide/advanced/lazy-loading.html

## dynamic-import
Vue Lacy loading　に必要。（見やすく書くため）

`yarn add babel-plugin-syntax-dynamic-import`

`.babelrc`

```
{
    "plugins": ["syntax-dynamic-import"]
}
```
## concurrently
複数のnpmコマンドを実行するためのpkg、`npm run aa & npm run bb` とやると、片方バックグラウンドで動いて消すのが面倒なため。
 https://www.diycode.cc/projects/kimmobrunfeldt/concurrently https://www.npmjs.com/package/concurrently



# 実行コマンドの編集
基本 webpack.css.mix.js と webpack.mix.js　の両方を実行するように変更

```:json

    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
```
↓

```:json
    "scripts": {
        "dev": "npm run development -- --env.mixfile=./webpack.css.mix && npm run development -- --env.mixfile=./webpack.mix",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch:basic": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "concurrently --kill-others \"npm run watch:basic -- --env.mixfile=./webpack.css.mix\" \"npm run watch:basic\"",
        "watch-poll:basic": "npm run watch:basic -- --watch-poll",
        "watch-poll": "concurrently --kill-others \"npm run watch-poll:basic -- --env.mixfile=./webpack.css.mix\" \"npm run watch-poll:basic\"",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production -- --env.mixfile=./webpack.css.mix && npm run production -- --env.mixfile=./webpack.mix",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
```

# その他
※ https://github.com/webpack/webpack/milestone/18

現状(2019/03/20)64%で No due date

期日は決まってない…

alpha版は出ているようです…。

# 参考
http://www.compulsivecoders.com/tech/how-to-build-multiple-vendors-using-laravel-mix/ 
https://stackoverflow.com/questions/45046696/laravel-mix-multiple-entry-points-generates-one-manifest-js