Laravel Mix for Asset Bundler on AdonisJS
Adonis Mix Asset is an assets bundler based on Laravel Mix for AdonisJS application.
Laravel Mix is an awesome assets bundler and easy to use!
npm i adonis-mix-asset && npm i --save-dev laravel-mix
# or if using Yarn
yarn add adonis-mix-asset && yarn add --dev laravel-mixnode ace configure adonis-mix-assetIt will install the provider, command, and copy webpack.mix.js configuration file to the project's root folder.
The configuration file is on webpack.mix.js.
const mix = require('laravel-mix')
/**
* By default, AdonisJS public path for static assets is on the `./public` directory.
*
* If you want to change Laravel Mix public path, change the AdonisJS public path config first!
* See: https://docs.adonisjs.com/guides/static-assets#the-default-directory
*/
mix.setPublicPath('public')
// Add your assets here
mix
.js('resources/assets/scripts/app.js', 'scripts')
.sass('resources/assets/styles/app.scss', 'styles')For more information on Laravel Mix features. See Laravel Mix Documentation.
Use mix view helper to generate assets url. Example :
The view helper parses mix-manifest.json to generate assets url.
Make sure before you run the command, you already configuring the webpack.mix.js file, and run node ace serve or node ace build.
Build assets :
node ace mix:buildBuild assets and watch for file changes :
node ace mix:watchBuild assets for production :
node ace mix:build --productionAdd this to your .gitignore file :
mix-manifest.jsonAlso, for example if you want to output your scripts on public/scripts and styles on public/styles, you need to add all of those folders to your .gitignore file. Example :
public/scripts
public/stylesIf you want to analyze all of your asset sizes for production. Run this command :
node ace mix:build --analyze --productionIt will open your browser automatically and show an interactive treemap visualization of the contents of all your assets.
If the browser doesn't open automatically. You can open it on 127.0.0.1:8888.
Analyzer preview :
Source : webpack-bundle-analyzer documentation.
First, read Laravel Mix instructions about HMR.
Run this command to enable HMR :
node ace mix:watch --hotIf you want to use another Mix configuration, you can use --mix-config option either on mix:build or mix:watch. Example :
node ace mix:build --mix-config prod/webpack.mix.js
node ace mix:watch --mix-config prod/webpack.mix.jsIf you're planning to use Typescript asset for your Front-End, here are some tips to get started.
For example if you want to put your scripts on resources/assets/scripts, then you need to create tsconfig.json in those folder. That way, it will prevent conflict between your Front-End script and Back-End script.
Here's an example tsconfig.json you can use :
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"noUnusedLocals": true,
"incremental": true,
"noUnusedParameters": true,
"declaration": false,
"strictNullChecks": true
},
"include": ["./"]
}