https://webpack.js.org/guides/progressive-web-application/
We Don't Work Offline Now
C:\Users\ZiGoo\webpack-demo>npm install http-server --save-dev
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 13 packages from 20 contributors and audited 7829 packages in 10.81s
found 0 vulnerabilities
C:\Users\ZiGoo\webpack-demo>package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"module": "src/index.js",
"scripts": {
"build": "webpack",
"start": "http-server dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"http-server": "^0.11.1",
"lodash": "^4.17.11",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"workbox-webpack-plugin": "^3.6.3"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"exports-loader": "^0.7.0",
"imports-loader": "^0.8.0",
"whatwg-fetch": "^3.0.0"
}
}index.js
import _ from 'lodash';
import printMe from './print.js';print.js
export default function printMe() {
console.log('I get called from print.js!');
}webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};C:\Users\ZiGoo\webpack-demo>npm start
> [email protected] start C:\Users\ZiGoo\webpack-demo
> http-server dist
Starting up http-server, serving dist
Available on:
http://192.168.10.1:8080
http://192.168.199.186:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the serverAdding Workbox
C:\Users\ZiGoo\webpack-demo>npm install workbox-webpack-plugin --save-dev
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
updated 1 package and audited 7829 packages in 15.864s
found 0 vulnerabilities
C:\Users\ZiGoo\webpack-demo>C:\Users\ZiGoo\webpack-demo>npm install html-webpack-plugin --save-dev
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 48 packages from 64 contributors and audited 7902 packages in 16.03s
found 0 vulnerabilities
C:\Users\ZiGoo\webpack-demo>C:\Users\ZiGoo\webpack-demo>npm install clean-webpack-plugin --save-dev
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 1 package from 1 contributor and audited 7918 packages in 7.851s
found 0 vulnerabilities
C:\Users\ZiGoo\webpack-demo>C:\Users\ZiGoo\webpack-demo>npm run build
> [email protected] build C:\Users\ZiGoo\webpack-demo
> webpack
clean-webpack-plugin: C:\Users\ZiGoo\webpack-demo\dist has been removed.
Hash: 6d58fdaa676c4e71ea33
Version: webpack 4.27.1
Time: 530ms
Built at: 2018-12-18 14:48:40
Asset Size Chunks Chunk Names
app.bundle.js 552 KiB app [emitted] app
index.html 264 bytes [emitted]
precache-manifest.e0f8156358f152269d84531acf50a3bf.js 268 bytes [emitted]
print.bundle.js 4.06 KiB print [emitted] print
service-worker.js 955 bytes [emitted]
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {app} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {app} [built]
[./src/index.js] 62 bytes {app} [built]
[./src/print.js] 87 bytes {print} {app} [built]
+ 1 hidden module
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 2 hidden modules
C:\Users\ZiGoo\webpack-demo>
Registering Our Service Worker
import _ from 'lodash';
import printMe from './print.js';
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}C:\Users\ZiGoo\webpack-demo>npm start
> [email protected] start C:\Users\ZiGoo\webpack-demo
> http-server dist
Starting up http-server, serving dist
Available on:
http://192.168.10.1:8080
http://192.168.199.186:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server