Instantly share code, notes, and snippets.

@peakhmr /README.md
Last active Nov 27, 2018

Embed
What would you like to do?
PWA with Laravel Mix, Webpack and Service Worker caching strategies
{
"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();
@vinayakkulkarni

This comment has been minimized.

Copy link

vinayakkulkarni commented Jul 25, 2018

This needs to be updated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment