I am huge fan of Webpack and Mix from @jefferyWay. Lately I wanted wanted to get the latest and the greatest release of Webpack 4 up and running in the my Laravel project , The struggle it has been is the issue in GitHub for implementing the new version has been put on hold for some times now #1495.
I started today searching in a way of implementing the new Webpack using the webpack.config.js and I stumbled in the new npm package from Spatie and it laid the essence in building my config file .
The first thing to know that this config file it has tailwind preconfigure . So if you don’t need it you could fork the project and remove it , but why would you (Tailwind is the greatest css framework ever built) . And second it has no scss loader as well , so you might need it . For my case I needed only Tailwind and Vue and this package has this two out of the box .
To install it you might find yourself updating some packages like @blade/core , vue-loader, and if you use the Sass loader , you need to update node-sass as well
The run https://gist.github.com/36b0cc848e98c36635c5ee8d1c8fc8c7
or
yarn add @spatie/webpackThen create the webpack.config.js with
https://gist.github.com/559a3e17a2d9cff3fcf3722b9ec26dfa
Then in your package.json update the path to your webpack.config.js With some minor tweaks adding the webpack mode param in the scripts like
https://gist.github.com/6e378468a6440fd91834fcbb07086b2e
Now let’s play with Webpack .
Splitting the code is great way to reduce the size of your bundle and make you app fast . With Webpack 4 has this feature and its really handy
In your Vue app.js you could make a chunk for all your components this way they wouldn’t be loaded in all pages but only the pages that need them . To do so you just add the webpack chunk name
https://gist.github.com/5453d02a8f4f085799d222d17e0a6765
And you will see the that when you visit a page with the component it will load example-component-xxxxxxxxxxxxxxxx.js
The service worker is huge step in the direction of PWA (Progressive web applications) this feature is in the standers of Http2 so to make to work you have to enable ssl and use https .
To add this feature I upped to use Workbox from google that provide caching and prefetch Workbox .
First step is to install workbox-webpack-plugin https://gist.github.com/abec400a4f36aab0f5362eab3cd345d4
Then Add the service worker checker to make sure that the browser support the service worker https://gist.github.com/108e6f531e3d6b5d6ba1d285e671b396
After that you just need to setup your webpack.config.js and add what you need to be cached like Images , Api calls , js , css and other resources that will help the website to load as fast as possible
My webpack.config.js look like this https://gist.github.com/1c8c344178423820eabb37b5e70610c1
Now your website is running the latest features that the Webpack and the browser can offer.
I hope you like my first tutorial . And Build amazing apps ;)