1. 代码分割，可以将一个文件拆分为多个文件，根据路由来实现按需加载

    code_split // 主要针对JS代码

    const { resolve } = require (‘path’);
    const HtmlwebpackPlugin = require(‘html-webpack-plugin’);

    module.exports = {
    entry: ‘./src/js/index.js’, // 根据入口文件进行代码分割（单入口文件）
    entry：{ // 多入口文件：有一个入口，最终输出就有一个bundle
    main: ‘./src/js/index.js’,
    test: ‘./src/js/test.js’
    }
    output: {
    filename: ‘js/built.[contenthash:10].js’, // 单入口文件
    filename: ‘js/[name].[contenthash:10].js’ // [name]：取文件名
    path:resolve(__dirname,’build’)
    },
    plugins: [
    new HtmlWebpackPlugin({
    tempalte: ‘./src/index.js’,
    minify: {
    collapseWhitespace: true，
    removeComments: true
    }
    })
    ],
    // 可以将node_modules中代码单独打包为一个chunk，最终输出（单入口）
    // 自动分析多入口chunk中，有没有公共的文件，如果有会打包为一个单独的chunk
    optimization：{
    splitChunks: {
    chunk: ‘all’
    }
    },
    mode: true
    }

    /
    通过js代码，让某个文件被单独打包为一个chunk
    import动态导入语法: 能将某个问文件单独打包
    /
    import(/ webpackChunkName: ‘test’ /‘./test’)
    .then({mul,count})=>{
    // 文件加载成功
    console.log(mul(2,5));
    })
    .catch(()=>{
    // eslint-disable-next-line
    console.log(‘文件加载失败’);
    })

    lazy_loading 懒加载
    懒加载：懒加载可以理解为延迟加载，等到需要的时候再去加载使用
    console.log(‘index.js文件被加载了’)
    document.getElementById(‘btn’).onclick=function(){
    // 懒加载~: 当文件需要使用时才加载
    // 预加载prefetch：会在使用之前，提前加载js文件
    等其它资源加载完毕，浏览器空闲了，再偷偷加载资源（ie、移动端兼容性不好）
    import(‘./test’).then(({ mul })=>{
    console.log(mul(4,5));
    });
    // 正常加载可以认为是并行加载(同一时间加载多个文件)
    import(/webpackChunkName: ‘test’，webpackPrefetch：true /‘./test’).then(({mul})=>{
    console.log(mul(4,5));
    }）
    }
    // 懒加载加载前先分割代码，然后对单独的js代码进行懒加载
    将import 方法放到一个异步的回调函数中

    PWA 渐进式网络开发应用程序 (离线)
    ServiceWorker
    workbox—> workbox-webpack-plugin
    const workboxWebackPlugin = require(‘workbox-webpack-plugin’);
    plugins: [
    new WorkboxWebpackPlugin.GenerateSW({
    /
    1.帮助serviceworker快速启动
    2.删除旧的 serviceworker
    /
    clientsClaim: true,
    skipWaiting: true
    })
    ]

    入口文件中
    // 注册serviceworker
    // 处理兼容性问题
    if（’serviceWorker’ in navigator）{
    window.addEventListener(‘load’,()=>{
    navigator.serviceworker.register(‘/service-worker.js’)
    .then(()=>{
    console.log(‘注册成功了’)；
    })
    .catche(()=>{
    console.log(‘注册失败了’);
    })
    })
    }

    1. eslint 不认识window、navigator全局变量

    解决：需要修改package.json中eslintConfig配置
    “env”: {‘
    “browser”: true // 支持浏览器全局变量
    }

    1. sw代码必须运行在服务器上

    —> node.js
    —> npm i serve -g
    serve -s build 启动服务器，将build目录下所有资源作为静态文件暴露出去