Laravel Mix(Webpack)+globを導入しsassやJavaScriptをコンパイル

Laravel Mixインストール

npm install laravel-mix cross-env node-sass --save-dev
（npmが使える環境である前提）

Webpackにglobを導入してみよう！

npm install glob

globをインストールしたら、webpack.mix.js上でglobをインポートします。
const glob = require('glob');

Laravel MixでビルドしたVue.jsがIE11で動かない時の対処法

laravel-mix-polyfillのインストール
npm install laravel-mix-polyfill --save-dev

laravel-mix-polyfillを使うための設定

webpack.mix.js

const mix = require('laravel-mix');

require('laravel-mix-polyfill');
 mix.js('resources/js/app.js', 'public/js')
            .polyfill({
                enabled: true,
                useBuiltIns: "usage",
                targets: {"firefox": "50", "ie": 11}
            })
            .version();

versionメソッドは自動的に全コンパイルファイルのファイル名へ一意のハッシュを追加し、キャッシュを更新できるようにします。

ビュー中でLaravelのグローバルmix関数を使う必要があります。
mix関数はハッシュ付きファイルの最新の名前を自動的に判定します。
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

js,sassファイルを設定ファイルのサンプル

webpack.mix.js

const mix = require('laravel-mix');
const glob = require('glob');
require('laravel-mix-polyfill');


/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

/**
 * Sassのコンパイル
 * @type {string}
 */
const sassBaseDir = 'resources/sass';
const sassPublicDir = 'public/css';
const sassCompileDirs = ['pc', 'sp'];
const sassSyncDirs = [
    `${sassBaseDir}/+(${sassCompileDirs.join('|')})/pages/`,
    `${sassBaseDir}/+(${sassCompileDirs.join('|')})/`,
];

sassSyncDirs.forEach(function (dir) {
    glob.sync(dir + '*.scss', {
        ignore: dir + '_*.scss',
    }).map(function (file) {
        mix.sass(file, file.replace(sassBaseDir, sassPublicDir).replace('.scss', '.css')).version();
    });
});

/**
 * js ES5/ES6
 * @type {string}
 */
const jsBaseDir = 'resources/js';
const jsPublicDir = 'public/js';
const jsCompileDirs = ['pc', 'sp', 'common'];
const jsSyncDirs = [
    `${jsBaseDir}/+(${jsCompileDirs.join('|')})/*.js`,
];

jsSyncDirs.forEach(function (dir) {
    glob.sync(dir).map(function (file) {
        mix.js(file, file.replace(jsBaseDir, jsPublicDir))
            .polyfill({
                enabled: true,
                useBuiltIns: "usage",
                targets: {"firefox": "50", "ie": 11}
            })
            .version();
    });
});

Laravel Mixの実行

npm run devを実行すると、
package.jsonに書いてあるスクリプトが実行され、
設定ファイルに記述したコンパイルやバンドルが実行される。