Php/laravel/laravel5/laravelmix/基本のソースを表示

==laravel mixとは==
laravel用のwebpackのAPIラッパーでlaravel Elixirの後継

==laravel5.4以上のプロジェクトを用意==
[[php/laravel/laravel5/インストール]] [ｼｮｰﾄｶｯﾄ]
 composer create-project laravel/laravel=5.4.* laravelmix1 --prefer-dist
laravelmix1はプロジェクト名

==laravel mixインストール準備==
node,npmをインストール

[[javascript/nodejs/インストール/nvm]] [ｼｮｰﾄｶｯﾄ]

[[javascript/nodejs/npmインストール]] [ｼｮｰﾄｶｯﾄ]

 node -v
 npm -v

==laravel mixインストール==
 npm install

laravel5.4には初期で入ってるはずだが、
 $ npm list | grep laravel-mix
 ├─┬ laravel-mix@1.7.2
入っていなければインストール
 $ npm install laravel-mix cross-env node-sass --save-dev

package.jsonが更新される
 "devDependencies": {
 +    "cross-env": "^5.1.3",
 +    "laravel-mix": "^1.7.2",
 +    "node-sass": "^4.7.2"
 }

==npmコマンド==
 npm run dev # minifyなしコンパイル
 npm run watch # 変更ありファイルを監視してコンパイル
 npm run watch-poll # 変更ありファイルを監視してコンパイル(dockerなど特定の環境)
 npm run prod # minifyありコンパイル

コマンド詳細はpackage.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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

* npm run devを実行するとcssやjsなどがコンパイルされる（常駐状態にはならない)
* npm run watchは常駐状態になる

==対象js,cssを増やす場合==
プロジェクト直下の webpack.mix.js に追加 
 let mix = require('laravel-mix');
 mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

==js,css使用方法==
 <link rel="stylesheet" href="/css/app.css">
 <script src="/js/app.js"></script>

==本番でjs,cssをブラウザキャッシュをさせない方法==
以下両方記載

webpack.mix.js
 mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
 if (process.env.NODE_ENV === 'production') {
   mix.version();
 }
~.blade.php
 <nowiki><link rel="stylesheet" href="{{ mix('/css/app.css') }}"></nowiki>
 <nowiki><script src="{{ mix('js/app.js') }}"></script></nowiki>

public/mix-manifest.json にハッシュがついていることを確認
    "/js/app.js": "/js/app.js?id=5363006c0c506c04f3d2",
    "/css/app.css": "/css/app.css?id=19214247ec8b1f7d17fd"

==参考==
Laravel mix事始め
https://qiita.com/ryosukes/items/24a556b9e634c183f93b

Laravel Mixでwebpackをもっと簡単に使う方法 
https://www.webprofessional.jp/use-laravel-mix-non-larav