- 首先我说一下什么是PWA,PWA如果我们在线上环境配置了PWA这种技术,当用户成功访问一次我们线上代码的时候,浏览器就会缓存住这个网页,如果服务器在用户访问的过程中挂掉了,那么用户再访问这个地址的时候,就会显示之前缓存的页面
- 依赖
cnpm install http-server -D
cnpm install workbox-webpack-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const prodConfig = {
mode: 'production',
devtool: 'cheap-module-source-map',//线上
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
// modules: true
}
},
{
loader: "postcss-loader"
}
]
},
{
test: /\.scss$/, //识别所有以css文件结尾的文件;use中的执行顺序:从右向左,从下到上
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 2,
// modules: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
]
},
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
plugins: [ //依赖的插件
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].chunk.css'
}),
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
})
],
output: {
filename: '[name].[contenthash].js', //webpack打包好的文件名称
chunkFilename: '[name].[contenthash].chunk.js',//间接引入 例如chunk的名字 命名
}
}
module.exports = merge(baseConfig, prodConfig);
{
"name": "webpack-config",
"version": "1.0.0",
"sideEffects": [
"@babel/polly-fill",
"*.scss",
"*.css"
],
"description": "webpack配置研究",
"main": "index.js",
"scripts": {
"start": "http-server dist",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.js"
},
"author": "xiaobaocheng",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"autoprefixer": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^2.6.5",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"http-server": "^0.12.3",
"imports-loader": "^1.2.0",
"mini-css-extract-plugin": "^1.3.3",
"node-sass": "^5.0.0",
"postcss-loader": "^4.1.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.7.0",
"workbox-webpack-plugin": "^6.0.2"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"jquery": "^3.5.1",
"lodash": "^4.17.20"
}
}
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.log('serviceWorker registed');
}).catch(err => {
console.log('serviceWorker registed error');
})
})
}