Webpack——PWA（离线可访问技术）

PWA（离线可访问技术）

webpack.config.js

/**
 * PWA：渐进式网络开发应用程序（离线可访问）
 *  workbox——》workbox-webpack-plugin
 *  1.下载workbox——》cnpm i workbox-webpack-plugin -D
 *  2.引入workbox——》const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 *  3.使用workbox——》在plugins中如下配置：
 *      // 调用PWA插件
        new WorkboxWebpackPlugin().GenerateSW({
             //1.帮助serviceworker快速启动
             //2.删除旧的serviceworker
             //  生成一个serviceworker的配置文件
             clientsClaim: true,
             skipWaiting: true,
         }),
    4.在入口文件index.js中注册serviceworker
        // 注册serviceworker
        // 处理兼容性问题
        if ("serviceWorker" in navigator) {
            // 当全局资源加载完毕之后
            window.addEventListener('load', () => {
                //注册serviceworker
                navigator.serviceWorker.register('/service-worker.js')
                .then(() => {
                    console.log("service worker注册成功！")
                })
                .catch(() => {
                    console.log("service worker注册失败！")
                })
            });
        }
    5.使用webpack打包，将代码放到服务器中运行
    6.搭建服务器
        cnpm i serve -g
        serve -s build  启动服务器，将build目录下所有资源当作静态资源暴露出去
 */
const { resolve } = require('path');
// 引入workbox
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 将css单独提出文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入压缩插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 将通用的loader抽离出来
// 设置nodejs的环境变量
// process.env.NODE_ENV = 'development';
const commonLoaders = [
    MiniCssExtractPlugin.loader, // 使用该loader将js中的css导入到文件中，并引入html文件
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                ident: 'postcss',
                plugins: [['postcss-preset-env', {}]]
            }
        },
    },
]
module.exports = {
    mode: 'development',
    // 单入口
    // entry: './src/js/index.js',
    // 多入口：有几个入口就输出几个bundle
    // entry: {
    //     index: './src/js/index.js',
    //     test: './src/js/test.js',
    // },
    entry: ['babel-polyfill', './src/js/index.js', './src/index.html'],
    output: {
        filename: 'js/[name][contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 以下loader只会匹配一下，提升构建速度
                // 注意：不能有两个loader处理同一个文件
                oneOf: [
                    // 对js进行兼容性处理
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: 'babel-loader',
                                options: {
                                    presets: ["@babel/preset-env"],
                                    plugins: [["@babel/plugin-transform-runtime"]],
                                    //开启缓存，第二次构建时，只处理发生变化的js文件
                                    cacheDirectory:true
                                },
                            }
                        ]
                    },
                    // css文件处理
                    {
                        test: /\.css$/,
                        use: [
                            ...commonLoaders
                        ],
                    },
                    // less文件处理
                    {
                        test: /\.less$/,
                        use: [
                            ...commonLoaders,
                            'less-loader'
                        ],
                    },
                    // image图片处理
                    {
                        test: /\.(jpg|png|gif)$/,
                        type:"asset",
                        //解析
                        parser: {
                            //转base64的条件
                            dataUrlCondition: {
                                maxSize: 8 * 1024, // 8kb
                            }
                        },
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'img/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                    // 处理html中的image资源
                    {
                        test: /\.html$/,
                        loader: 'html-loader',
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'img/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                    // 字体图标等其他资源处理
                    {
                        exclude: /\.(html|css|js|jpg|png|gif)$/,
                        type: 'asset/resource',
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'otherSource/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                ]
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        // 使用miniCssExtractPlugin插件将css提取为一个文件
        new MiniCssExtractPlugin({
            // 对输出的文件重命名
            filename: 'css/built[contenthash:10].css',
        }),
        // 调用压缩css插件
        new OptimizeCssAssetsWebpackPlugin(),
        // 调用PWA插件
        new WorkboxWebpackPlugin.GenerateSW({
            /**
             * 1.帮助serviceworker快速启动
             * 2.删除旧的serviceworker
             *  生成一个serviceworker的配置文件
             */
            clientsClaim: true,
            skipWaiting: true,
        }),
    ],
    devServer: {
        // 开发服务器项目路径
        static: resolve(__dirname, 'build'),
        // 是否开启gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 是否自动打开浏览器
        open: true,
        // 打开HMR功能
        hot: true,
    },
    // 开启追踪源代码报错功能
    devtool: 'eval-source-map',
    // 使用代码分割功能
    /**
     * 可以将node_modules中的代码单独打包成一个trunk最终输出
     * 自动分析多入口文件中，是否有公共的依赖，如果有会打包成一个单独的trunk
     */
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
}

index.js

// 注册serviceworker
// 处理兼容性问题
if ("serviceWorker" in navigator) {
    // 当全局资源加载完毕之后
    window.addEventListener('load', () => {
        //注册serviceworker
        navigator.serviceWorker.register('/service-worker.js')
        .then(() => {
            console.log("service worker注册成功！")
        })
        .catch(() => {
            console.log("service worker注册失败！")
        })
    });
}