webpack Progressive Web Application
阿新 • • 發佈:2018-12-18
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 server
Adding 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