webpack实战——PWA的打包配置(二)

在服务器上运行代码

模拟后端服务器
安装

npm install http-server --save-dev

src/index.js

console.log('hello')

webpack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    entry: {
        app: './src/index.js',
    },
    output: {
        filename: '[name].bundle.js',  //入口文件走这里
        chunkFilename: '[name].chunk.js',  //  间接生成的文件走这里
        path: path.resolve(__dirname, '../dist'),
        //publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
        // publicPath: '/'  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    //代码分割
    optimization: {
        usedExports: true, 
        splitChunks: {
            //对异步代码实现代码分割  //initial: 同步代码 //all: 对同步异步代码都进行代码分割
            //使用all对同步代码实现代码分割时,还会走cacheGroups这里,需要在这里做一些配置
            chunks: "all", 
            minSize: 30000,  //大于该值做代码分割
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {  //同步代码走这里
                    //引入的库文件是否在node_modules中,是就放在vendor组中
                    test: /[\\/]node_modules[\\/]/,  
                    priority: -10,
                    // filename: 'vendors.js'
                },
                default: {     
                    priority: -20,
                    reuseExistingChunk: true,
                }
            }
        }
    }
}

webpack.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')  
const devConfig = {
    //默认没有Tree Shaking功能, devtool: cheap-module-eval-source-map
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            "corejs": "2",  //declaring corejs
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件
    ],
    //Tree Shaking配置项
    // optimization: {
    //     usedExports: true
    // }
}

module.exports = merge(commonConfig, devConfig)

webpack.prod.js

const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const prodConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            "corejs": "2",  //declaring corejs
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 
                }
            },
            {
                test:/\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
            },
        ]
    },
}


module.exports = merge(commonConfig, prodConfig)

在dist目录下开启一个http-server,让dist生成的文件在http-server上启动
package.json

{
	"scripts":{
		"test": "echo \"Error: no test specified\" && exit 1",
	    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
	    "build": "webpack --config ./build/webpack.prod.js",
	    "start": "http-server dist"
	}
}

运行npm run start,就可以访问页面内容, 而当我们断开服务器, 则不能访问页面内容

PWA

PWA技术: 第一次访问网站成功了, 再次访问网站时,服务器挂掉了, 当第二次重新访问网站的时候会在本地有一份缓存, 可以利用缓存将之前访问的页面展现出来

workbox-webpack-plugin

使用workbox-webpack-plugin实现PWA技术(要上线的代码才考虑PWA)
安装:

npm i workbox-webpack-plugin --save-dev

webpack.prod.js

//...
const WorkboxPlugin = require('workbox-webpack-plugin')
const prodConfig = {
	//...
    plugins: [
        new WorkboxPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true
        })
    ],
}

module.exports = merge(commonConfig, prodConfig)

运行npm run build,生成的dist目录下多处了两个文件:

通过这两个文件可以让serviceworker生效,使项目支持PWA

添加业务代码:
src/index.js

console.log('hello')

if('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('./../dist/service-worker.js')
        .then(registeration => {
            console.log('service-worker registed')
        }).catch(error => {
            console.log('service-worker registed error')
        })
    })
}

重新运行npm run build打包
再运行npm run start
访问:http://127.0.0.1:8080
当关闭服务器时,之前的页面已经缓存下来, 就可以继续访问页面了~