Laravel Mix5からLaravel Mix6にアップデートする

Laravel Mixとは

javascript、CSSなどのフロントエンド関連に関するjavascript、CSSのファイルをビルド/コンパイルするためのツールです。
webpackというツールの基礎知識が必要となっています。
以下の記事で大体のイメージを掴むことができると思います。

アップデートが必要となった経緯

javascriptの読み込みを速くするために、CompressionWebpackPluginを使って、app.jsとapp.csをgzip圧縮するためにnpm install compression-webpack-plugin --save-devをしようとしたところ、アップデートが必要であったためにアップデートしました。

Laravel Mix5とLaravel Mix6の変更点

５系と６系で大きく異なっているのが、npmのscriptの部分です。

5系のscript

"scripts": {
    "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": "npm run development -- --watch",
    "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 --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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"
}

6系のscript

"scripts": {
    "dev": "mix",　　#　npm run devが使いたい人用
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

また、Vueを使っている場合はwebpack.mix.jsの記述も少し変える必要があります。

5系のwebpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

6系のwebpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue()
   .sass('resources/sass/app.scss', 'public/css');

このように.vue()という記述を追加する必要があります。

最後に、resources/js/app.js内も変更する必要がありました。

5系のapp.js

window.Vue = require('vue');

このVueをインポートしていた記述を

6系のapp.js

import Vue from 'vue'

と変更すれば、問題なく動作すると思います。

最後に

webアプリ開発は今回が初めてで、わからないことばかりですが少しずつ学んでいこうと考えています。今後も学んだことを共有していこうと思うので、よろしくお願いします。
もし、内容に間違いがありましたら教えていただけるとありがたいです。

参考にした記事