Dorokhov.codes

08. Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps. It’s an NPM package, and we can install it using a simple command:

# package.json is already there.
npm install

# Using Docker.
docker container run --rm \
    --interactive \
    --tty \
    --volume "$PWD:/usr/src/app" \
    --workdir /usr/src/app \
    --user $(id -u):$(id -g) \
    node:21 npm install

Commands

npm run dev

npm run production

npm run watch

Working with CSS

Concatenating:

mix.styles([
    'resources/css/normalize.css',
    'resources/css/videojs.css'
], 'public/css/all.css');

Working with JS

Concatenating:

mix.scripts([
    'resources/js/jquery.js',
    'resources/js/bootstrap.js',
], 'public/js/scripts.js');

Working with files

Copying files:

mix.copyDirectory('resources/img', 'public/img');

Configuration

webpack.mix.js:

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

Browsersync

Browsersync will automatically monitor your files for changes, and inject any changes into the browser - all without requiring a manual refresh.

mix.browserSync('localhost');