はじめに
Laravel Mixを利用する場合に、本番環境と開発環境で出力されるJSファイルやCSSファイルを分けたいと思います。
私は本番環境では不要なコメントを削った圧縮ファイルにしたり、開発環境ではデバッグしやすいように元ファイルがわかるようにしたり、という使い分けをします。
今回はその方法を簡単にご紹介します。
環境
環境は「DockerでLaravel-Mix(Laravel8×Vue3)環境構築」を参考に構築してみてください。
先にこちらをご確認いただくと環境や構成はイメージしやすいと思います。
方法
1. webpack.min.jsを修正
本番環境ではapp.min.js、app.min.cssとして出力し、開発環境ではapp.jsとapp.cssとして出力されるように設定します。
server/webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
if (mix.inProduction()) {
mix.js('resources/js/app.js', 'public/js/app.min.js')
.postCss('resources/css/app.css', 'public/css/app.min.css', [
//
]);
} else {
mix.js('resources/js/app.js', 'public/js/app.js')
.postCss('resources/css/app.css', 'public/css/app.css', [
//
]).sourceMaps();
}
mix.vue();
2. Laravelビューファイル変更
server/resources/views/app.blade.phpを作成します。
Laravelの.envで設定している環境に合わせて、読み込むファイルを変えるようにしています。
server/resources/views/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@if(config('app.env') === 'production')
<link href="{{ asset('css/app.min.css') }}" rel="stylesheet"/>
<script src="{{ asset('js/app.min.js') }}" defer="defer"></script>
@else
<link href="{{ asset('css/app.css') }}" rel="stylesheet"/>
<script src="{{ asset('js/app.js') }}" defer="defer"></script>
@endif
</head>
<body>
<div id="app">
<test-vue></test-vue>
</div>
</body>
</html>
3. .envの設定
.envのAPP_ENVで環境名を設定できます。
開発環境用
.env
APP_ENV=local
本番環境用
.env
APP_ENV=production
4. ビルドして確認
ビルドコマンドと出力されるファイルを確認しましょう。
開発環境の場合
ビルド
cd environment/development
docker-compose exec node bash -c "npm run dev"
出力ファイル
public
├── css
│ └── app.css
└── js
└── app.js
開発環境用
ビルド
cd environment/development
docker-compose exec node bash -c "npm run prod"
出力ファイル
public
├── css
│ └── app.min.css
└── js
├── app.min.js
└── app.min.js.LICENSE.txt