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

LravelMix4ではdynamic importをするとバグが起きる

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パイルを同じもので行うと起きるバグなので。

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