laravelmixインストール

README.md

webpack面倒なのでlaravelmixインストール

package.json 作って、

touch package.json

ファイルに記入。 ほぼ、laravelからのコピペで、yarnを使うのでちょっと書き換え。

{
    "private": true,
    "scripts": {
        "dev": "yarn 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": "yarn run development -- --watch",
        "watch-poll": "yarn 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": "yarn 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"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    }
}

yarnをインストール

yarnを設定してlaravelmixをインストールして、ホームディレクトリにwebpack.mix.jsをコピペ。

$ yarn
$ laravel-mix --save-dev
$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

コンパイル用のjsとsassのフォルダとファイルを作成

$ mkdir resources/js resources/sass

$ touch resources/js/app.js resources/sass/app.scss

webpack.mix.jsに排出先を書き込み

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

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

圧縮

yarn run dev //Compile and optimize the files in your assets directory
yarn run production //Compile assets for production