hit counter
Setting up Laravel with Laravel Mix and Webpack

Setting up Laravel with Laravel Mix and Webpack

Posted on May 24th, 2018.

I'm starting off from a brand new Laravel installation. With every new install of Laravel, Mix is already installed when you run npm install on your Laravel project.

When you open your Laravel app in a text editor, you should be able to see a webpack.mix.js file. This is the file where we can configure Webpack and Laravel Mix. In that file you should see:

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

/*
 |--------------------------------------------------------------------------
 | 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.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
\

By default, your assets belong in the resources/assets directory.

The next thing we want to do is run Webpack so that we can see changes to our sass and js files as the happen. To do this you'll want to do npm run dev. When you run it you should see something like this:

npm run dev

Now you can feel free to change your sass and js files.

However, if you've just created a new Laravel install you will have to include the link and script tags within your layout.

Also, when you are going to push to production you'll need to run the npm run production command.

If you have any questions with the setup, please feel free to leave a comment below.