Skip to content

Instantly share code, notes, and snippets.

@socheatsok78
Last active March 29, 2019 03:18
Show Gist options
  • Save socheatsok78/1cd4609620875db4e00d46ef51bb9cf5 to your computer and use it in GitHub Desktop.
Save socheatsok78/1cd4609620875db4e00d46ef51bb9cf5 to your computer and use it in GitHub Desktop.
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
Copy link

This needs to be updated

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