Laravel Mix's Webpack Configuration for auto dependencies extract and Workbox Caching strategies
The Service Worker Cookbook
Laravel Mix
Workbox
Workbox: Flexible PWA Libraries (Chrome Dev Summit 2017)
WordPress + PWAs = 💖 (Chrome Dev Summit 2017)
| { | |
| "private": true, | |
| "scripts": { | |
| "dev": "npm run development", | |
| "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", | |
| "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", | |
| "watch-poll": "npm run watch -- --watch-poll", | |
| "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", | |
| "prod": "npm run production", | |
| "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" | |
| }, | |
| "devDependencies": { | |
| "cross-env": "^5.1", | |
| "laravel-mix": "^2.0", | |
| "webpack-bundle-analyzer": "^2.10.0", | |
| "workbox-webpack-plugin": "^2.1.2" | |
| }, | |
| "dependencies": { | |
| "axios": "^0.17", | |
| "bootstrap": "^4.0.0", | |
| "jquery": "^3.2", | |
| "lodash": "^4.17.4", | |
| "popper.js": "^1.12.9", | |
| "vue": "^2.5.7", | |
| "vue-router": "^3.0.1" | |
| } | |
| } |
| const mix = require('laravel-mix'); | |
| const workboxPlugin = require('workbox-webpack-plugin'); | |
| const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; | |
| /* | |
| |-------------------------------------------------------------------------- | |
| | Package.json | |
| |-------------------------------------------------------------------------- | |
| */ | |
| const package = require('./package.json'); | |
| const dependencies = Object.keys(package.dependencies); | |
| /* | |
| |-------------------------------------------------------------------------- | |
| | Mix Asset Management | |
| |-------------------------------------------------------------------------- | |
| | | |
| | Mix provides a clean, fluent API for defining some Webpack build steps | |
| | for your Laravel application. By default, we are compiling the Sass | |
| | file for the application as well as bundling up all the JS files. | |
| | | |
| */ | |
| mix.extract(dependencies) | |
| .js('resources/assets/js/app.js', 'public/js') | |
| .sass('resources/assets/sass/app.scss', 'public/css') | |
| .autoload({ | |
| jquery: ['$', 'window.jQuery'] | |
| }) | |
| .options({ | |
| extractVueStyles: true, | |
| processCssUrls: true, | |
| uglify: {}, | |
| purifyCss: false, | |
| //purifyCss: {}, | |
| postCss: [require('autoprefixer')], | |
| clearConsole: false | |
| }) | |
| .webpackConfig({ | |
| plugins: [ | |
| new workboxPlugin({ | |
| globDirectory: `${__dirname}/public`, | |
| globPatterns: [ | |
| '**/*.{html,css,js}', | |
| 'fonts/**/*.*' | |
| ], | |
| // swSrc: './src/sw.js', | |
| swDest: path.join(`${__dirname}/public`, 'sw.js'), | |
| clientsClaim: true, | |
| skipWaiting: true, | |
| runtimeCaching: [ | |
| { | |
| urlPattern: new RegExp(`${process.env.APP_URL}`), | |
| handler: 'networkFirst', | |
| options: { | |
| cacheName: `${process.env.APP_NAME}-${process.env.APP_ENV}` | |
| } | |
| }, | |
| { | |
| urlPattern: new RegExp('https://fonts.(googleapis|gstatic).com'), | |
| handler: 'cacheFirst', | |
| options: { | |
| cacheName: 'google-fonts' | |
| } | |
| } | |
| ] | |
| }), | |
| new BundleAnalyzerPlugin({ | |
| analyzerMode: 'static', | |
| reportFilename: path.join(`${__dirname}/public`, 'webpack-report.html'), | |
| openAnalyzer: false, | |
| logLevel: 'silent' | |
| }), | |
| ] | |
| }) | |
| .sourceMaps(!mix.inProduction()) | |
| .disableNotifications(); |
This needs to be updated