Laravel Mix for Asset Bundler on AdonisJs v5
Adonis Mix Asset is assets bundler based on Laravel Mix for AdonisJs v5 application.
Laravel Mix is awesome assets bundler and easy to use!
If you need Laravel Mix for Adonis version lower than v5 you can use adonis-mix.
npm i --save-dev adonis-mix-asset laravel-mix@next
# or if using Yarn
yarn add --dev adonis-mix-asset laravel-mix@nextNOTE: We're using Laravel Mix v6.0.0-beta because the configuration already supported Typescript compilation with Babel. So we don't need to change the Webpack Config and create additional tsconfig.json in our AdonisJs v5 project.
node ace invoke 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')
// NOTE: Don't remove this, Because it's the default public folder path on AdonisJs
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.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent