Let's review a general workflow that you might adopt for your own projects.
Step 1: Install Laravel
laravel new my-app
Step 2: Install Node Dependencies
By default, Laravel ships with Laravel Mix as a dependency. This means you can immediately install your Node dependencies.
npm install
Step 3: Visit webpack.mix.js
Think of this file as your home base for all front-end configuration.
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'js').sass('resources/sass/app.scss', 'css');
Using the code above, we've requested JavaScript ES2017 + module bundling, as well as Sass compilation.
Step 4: Compilation
If those files don't exist in your project, go ahead and create them. Populate app.js with a basic alert, and app.scss with any random color on the body tag.
// resources/js/app.js
alert('Hello World');
// resources/sass/app.scss
$primary: red;
body {
color: $primary;
}
When you're ready, let's compile.
npx mix
You should now see two new files within your project's public directory.
./public/js/app.js./public/css/app.css
Excellent! Next, let's get into a groove. It's a pain to re-run npx mix every time you change a file. Instead, let's have Mix (and ultimately webpack) watch these files for changes.
npx mix watch
Perfect. Make a minor change to resources/js/app.js and webpack will automatically recompile.
Tip: You may also use
mix.browserSync('myapp.test')to automatically reload the browser when any relevant file in your Laravel app is changed.
Step 5: Update Your View
Laravel ships with a static welcome page. Let's use this for our demo. Update it to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Laravel</title>
<link rel="stylesheet" href="/css/app.css" />
</head>
<body>
<h1>Hello World</h1>
<script src="/js/app.js"></script>
</body>
</html>
Run your Laravel app. It works!
via https://laravel-mix.com/docs/6.0/workflow
