This package wraps Laravel Mix to make it work seamlessly with AdonisJS.
Install the package using either npm or yarn:
npm i @mezielabs/laravel-mix
# or
yarn add @mezielabs/laravel-mixThen, set up the package using the invoke command:
node ace invoke @mezielabs/laravel-mixThis will install laravel-mix and cross-env, create a webpack.mix.js file in the root of your project, and add some NPM scripts in your package.json for building your assets.
Also, the package adds some sample templates (assets/app.scss and assets/app.js) inside the resources directory. So for them to be picked up by the AdonisJS build process, we need to update metaFiles inside .adonisrc.js as below:
// .adonisrc.json
"metaFiles": [
...
"resources/assets/**/*",
]The templates are only meant to serve as a starting point. You are free to structure your assets however you like.
The webpack.mix.js file serves as a configuration layer on top of webpack, and it's the entry point for all asset compilation:
// webpack.mix.js
const mix = require('laravel-mix')
mix
.setPublicPath('public')
.js('resources/assets/js/app.js', 'js')
.sass('resources/assets/sass/app.scss', 'css')When compiled, this will create css/app.css and js/app.js inside the public directory.
To compile your asset, run Laravel Mix:
npm run mix:dev # start the build
npm run mix:watch # start the build and watch for changes
npm run mix:hot # start the build with hot reload
npm run mix:prod # build for productionThis package ships with a mix helper, which you can use in your Edge templates:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>The mix() helper takes the path of an asset.