webpack学习笔记

1. 命令窗口运行初始化eslint
   切换到./node_modules/.bin/文件夹下运行 eslint --init
   用airbnb

fix: true可以自动修复问题

// eslint-disable-next-line 不转义

• 解决eslint不认识浏览器的全局变量如$，修改package.json

"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
        es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
        node: true, // Node.js 全局变量和 Node.js 作用域
        browser: true, // 浏览器全局变量
        jquery: true // jQuery 全局变量
    }
}

webpack4.0以上的版本都要安装webpack-cli，否则报错

2. js兼容

babel @bable/core

• 基本js兼容性处理 --> @babel/preset-env
  • 问题：只能转换基本语法，如promise高级语法不能兼容
• 全部js兼容性处理 --> @babel/polyfill
  • 问题:只需要解决部门兼容性问题，但是将所有文件引入体积过大
• 需要做兼容性处理的就做，按需要加载-->core-js

3. HMR

• css文件：style-loader内部实现了
• js文件：默认不能使用HMR功能-->修改js代码，添加支持HRM功能的代码

if(module.hot) {
    module.hot.accpet('./print.js', function() {
        console.log('Accepting the updated printMe module!');
        printMe();
    })
}

只有print.js会被重新加载，其他文件不会被重新加载
注意：HMR功能对js的处理，只能处理非入口js文件

• html文件：默认不能使用HMR功能，导致html文件不能热更新（不用HMR功能）
  解决：修改entry入口，将html文件引入

4.source-map
提供了源代码到构造后代码映射关系（如果构建后代码出错了，通过映射可以追踪源代码错误）

• source-map 外部
  • 错就代码的准备信息和源代码的准确位置
• inline-source-map 内联
  只生成一个内联的source-map
• hidden-source-map 外部
  • 错误代码准确信息，没有错误位置，不能追踪代码错误，只能提示到构建后代码的错误位置
• eval-source-map 内联
  • 每个文件都生成对就的source-map，都在eval
• nosource-source-map 外部
  • 错误代码准确信息，没有源代码
• cheap-source-map 外部
  • 错误代码准确信息和源代码的错误位置
  • 只能精确到行，其他的可以精确到列
• cheap-module-source-map 外部
  • 错误代码准确信息和源代码错误位置
  • module会将loader的source map加入
• 内联和外部区别：
  1.外部生成了文件，内联没有 2.内联构建速度快
  内联会让代码体积很大，所以生产环境一般不会用内联
• 速度快：eval>inline>cheap>
  eval-cheap-source-map > eval-source-map
• 调试更友好
  source-map
  cheap-module-source-map
  cheap-source-map
• 开发环境：调试友好+速度快 -->eval-source-map（vue,react脚手架用） / eval-cheap-module-source-map
• 生产环境：
  nosource-source-map 全部隐藏
  hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

devtool: 'source-map' 

5. 运行npm run dev遇到的问题：Error: Cannot find module 'webpack-cli/bin/config-yargs'

• 原因：使用webpack到5.*, webpack-cli到4.*，需要使用webpack-cli 3.*
• 卸载当前的 webpack-cli npm uninstall webpack-cli
• 安装 webpack-cli 3.* 版本 npm install webpack-cli@3 -D

6. oneof 只处理一个loader

• 以免每个loader都执行一遍，提高打包构造速度
• 如果需要执行多个，可以外部放一个，oneof中放只执行一次

7. 缓存

• babel缓存
  • cacheDirectory: true
  • 让第二次打包构建速度更快
• 文件资源缓存
  • hash: 每次webpack构建时会生成一个唯一的hash值
    • 问题：因为js和css同时使用一个hash值，如果重新打包，会导致所有缓存失效(可我却只改动一个文件)
  • chunkhash: 根据chunk生成hash值,如果打包来源于同一个chunk，那么hash值就一样
    • 问题：js和css的hash值还是一样，因为css是在js中被引入的，所以同属于一个chunk
    • chunk的概念：一个入口文件，
  • contenthash：根据文件的内容生成hash值，不同文件的hash值一定不一样

8. tree shaking 去除无用代码

• 前提：1.必须使用ES6模块化 2.开启production环境
• 作用：减少代码体积
• 在package.json中配置：sideEffects: false 所有代码都是没有副作用（都可以进行tree shaking）
  • 问题:可能会把css/@babel/polyfill（副作用）文件删掉
  • "sideEffects": ["*.css", "*.less"]表示css文件不用进行tree shaking

9. 代码分隔

• 多入口：一个入口，输出一个bundle

entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
}

• splitChunks 将node_modules中代码单独打包一个chunk最终输入出
  • 自动分析多入口chunk中，有没有公共的文件，如果有打包成单独一个chunk，不会重复打包多次

optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

• 通过js代码，让某个文件单独打包成一个chunk
  • import动态导入语法：能将某个文件单独打包

import (/* webpackChunkName: 'test'*/'./test').then(() => {
    console.log('success');
}).catch(() => {
    console.log('error');
})

10. 懒加载

• 懒加载：进入页面不会加载print,当点击按钮才会加载print文件
  • 第一次加载后，第二次会直接执行，不会重复加载
  • 使用时才加载
• webpackPrefetch 预加载
  • 使用之前加载js文件
  • 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  • 兼容性不好
• 正常加载可以认为是并行加载（同时加载多个文件），没有明确的顺序，在前的先加载，同时文件过多过大，影响顺序

button.onclick = () => import(/*webpackChunkName: 'print', webpackPrefetch: true*/'./print').then((module) => {
    const print = module.default;
    print();
});

11. PWA 渐进式网络开发应用程序（离线可访问）
    
    workbox --> workbox-webpack-plugin

new workboxWebpackPugin.GenerateSw({
    /*
        1.帮助serviceworker快速启动
        2.删除旧的serviceworker
        生成一个serviceworker配置文件~
    */
    clientClaim: true,
    skipWaiting: true
})

入口文件index.js

/*
  1.eslint不认识window、navigator全局变量
  解决：需要修改package.json中eslintConfig配置
  "env": {
      "browser": true // 支持浏览器端全局变量
  }
  2.serviceworker代码必须运行在服务器上
  --> nodejs
  --> npm i serve -g
    serve -s build 启动服务器,将build目录下所有资源作为静态资源暴露出去
*/
// 注册serviceworker
// 处理兼容问题
if('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('./service-worker.js')
        .then(() => {
            console.log('serviceworker注册成功');
        })
        .catch(() => {
            console.log('注册失败');
        })
    })
}

12. 多进程打包

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
        /* 
            开启多进程打包
            进程启动大概为600ms,进程通信也有开销
            只有工作消耗时间比较长，才需要多进程打包
        */
        {
            loader: 'thread-loader',
            options: {
                worker: 2 // 进程2个
            }
        },
        {
            loader: 'babel-loader',
            options: [
                presets: [
                    [
                        '@babel/preset-env',
                        {
                            useBuiltIns: 'usage',
                            corejs: {version: 3},
                            targets: {
                                chrome: '60',
                                firefox: '50'
                            }
                        }
                    ]
                ]
            ]
        }
    ]
}

13. externals

externals: {
    // 拒绝打包jquery
    jquery: 'jQuery'
}

14. dll 优化重复打包第三方库，加快打包速度

• 使用dll技术，对某些库（第三方库：jquery、react、vue^）进行单独打包
  
  当你运行webpack时，默认查找webpack.config.js配置文件
  
  需求：需要运行webpack.dll.js文件
  
  --> webpack --config webpack.dll.js //webpack配置文件指向webpack.dll.js

• webpack.dll.js文件

const resolve = require('path');
const webpack = require('webpack');
module.exports = {
    entry: {
        // 最终打包生成的[name] --> jquery
        // ['jquery'] --> 要打包的库是jquery
        jquery: ['jquery']
    },
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'dll'),
        library: '[name]_[hash]', // 打包的库里面向外暴露出去的内空叫什么名字
    },
    plugins: [
        // 打包生成一个manifest.json --> 提供和jquery映射
        new webpack.DllPlugin({
            name: '[name]_[hash]', // 映射库暴露的内容名称
            path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
        })
    ]
}

生成dll文件后，就不需要打包了

• webpack.config.js文件

const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 告诉webpack哪些库不参与打包，同时使用时的名称也得变
        new webpack.DllRefrencePlugin({
            manifest: resolve(_dirname,'dll/manifest.json')
        }),
        // 将某个文件打包输出去，并在html中自动引入该资源
        new AddAssetHtmlWebpackPlugin({
            filepath: resolve(__dirname, 'dll/jquery.js')
        })
    ]
}

15. 性能优化总结

• webpack性能优化
• 开发环境性能优化
  • 优化打包构建速度
    • HMR
  • 优化代码调试
    • source-map
• 生产环境性能优化
  • 优化打包构建事项
    • oneof
    • babel缓存
    • 多进程打包
    • externals
    • dll
  • 优化代码运行的性能
    • 缓存(hash-chunkhash-contenthash)
      • hash：webpack每次打包都会重新生成一个hash
      • chunkhash：同属于一个chunk，共用一个hash
      • contenthash：根据文件内容生成的hash，文件内容变化才会重新生成hash
    • tree shaking
      • es6 module
      • production环境，uglyfy
      • sideEffect参数
    • code split 代码分隔
      • 单入口
      • 多入口
    • 懒加载/预加载
    • pwa

16. entry

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/*
    entry: 入口起点
    1. string --> './src/index.js' 
        单入口
        打包形成一个chunk,输出一个bundle文件
        filename: '[name].js' 此时chunk的名称默认是main
    2. array --> ['./src/index.js', './src/add.js']
        多入口
        所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件
        --> 只有在HMR功能中让html热更新生效~
    3. object --> {index: './src/index.js', add: './src/add.js'}
        多入口
        有几个入口文件就形成几个chunk,输出几个bundle文件
        此时chunk的名称是key
        --> 特殊用法
        {
            // 所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件
            index: ['./src/index.js', './src/count.js'], 
            // 形成一个chunk,输出一个bundle文件
            add: './src/add.js'
        }
*/
module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'build')
    }
}

19. output

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        // 文件名称（指定名称+目录）
        filename: '[name].js',
        // 输出文件目录（将来所有资源输出的公共目录）
        path: resolve(__dirname, 'build'),
        // 所有资源引入公共路径的前缀 --> 'imgs/a.jpg' --> './imgs/a.jpg'
        publicPath: '/', // 一般用于生产环境
        chunkFilename: '[name]_chunk.js', // 非入口chunk的名称
        // 通常结合dll用
        library: '[name]', // 整个库向外暴露的变量名
        libraryTarget: 'window', // 变量名添加到哪个上 browser
        libraryTarget: 'global', // 变量名添加到哪个上 node
    }
}

index.js

import count from './count';

console.log('index.js文件加载~');

/*
    chunkFilename: '[name]_chunk.js'
    --> 使用：打包成0_chunk.js（0为id）
    --> 不使用：使用filename: '[name].js'规则，打包成0.js
*/
import('./add').then(({default: add}) => {
    console.log(add(1,2);
})

console.log(count(3,2));

20. loader

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                // loader的配置
                test: /\.css$/,
                // 多个loader用use
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.js$/,
                // 排除node_modules下的js文件
                exclude: /node_modules/,
                // 只检查src下的js文件
                include: resolve(__dirname, 'src'),
                // 优先执行
                enforce: 'pre',
                // 延后执行
                enforce: 'post',
                // 单个loader用loader
                loader: 'eslint-loader',
                options: {}
            },
            {
                // 以下配置只会生效一个
                oneOf: []
            }
        ],
    }
}

21. resolve

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                // loader的配置
                test: /\.css$/,
                // 多个loader用use
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.js$/,
                // 排除node_modules下的js文件
                exclude: /node_modules/
            }
        ]
    },
    mode: 'development',
    // 解析模块的规则
    resolve: {
        // 配置解析模块路径别名：简写路径 缺点路径没有提示
        alias: {
            $css: resolve(__dirname, 'src/css')
        },
        // 配置省略文件路径的后缀名
        extensions: ['.js', '.json', '.jsx'],
        // 告诉webpack解析模块是去找哪个目录
        modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
    }
}

index.js

import '../css/index.css'
--> 可以写成: import '$css/index.css'

22. devServer

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                // loader的配置
                test: /\.css$/,
                // 多个loader用use
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.js$/,
                // 排除node_modules下的js文件
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        // 运行代码的目录
        contentBase: resolve(__dirname, 'build'),
        // 监视contentBase目录下的所有文件，一旦文件变化就会reload
        watchContentBase: true,
        watchOptions: {
            // 忽略文件
            ignored: /node_modules/
        },
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 5000,
        // 域名
        host: 'localhost',
        // 自动打开浏览器
        open: true,
        // 开启HMR功能
        host: true,
        // 不显示启动服务器日志信息
        clientLogLevel: 'none',
        // 除了一些基本启动信息以外，其他内容都不要显示
        quiet: true,
        // 如果出错了，不要全屏提示~
        overlay: false,
        // 服务器代理 --> 解决开发环境跨域问题
        proxy: {
            // 一旦devServe(5000)服务器受到/api/xx的请求，就会把请求文件转到另外一服务器（3000）
            '/api': {
                target: 'http://localhost:3000',
                // 发送请求时，请求路径重写：将/api/xxx --> /xxx (去掉/api)
                pathRewirte: {
                    '^/api': ''
                }
            }
        }
    }
}

浏览器和服务器是存在跨域问题,服务器和服务器不存在跨域问题，浏览器通过代理服务器向服务器发送请求，代理服务器把请求数据返回到代理服务器上

23.optimization

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                // loader的配置
                test: /\.css$/,
                // 多个loader用use
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.js$/,
                // 排除node_modules下的js文件
                exclude: /node_modules/
            }
        ]
    },
    mode: 'production',
    optimization: {
        splitChunks: {
            chunks: 'all',
            // 以下是默认值，可以不写
            /*
            minSize: 30*1024, // 分割的chunk最小为30kb
            maxSize: 0, // 最大没有限制
            minChunks: 1, // 要提取的chunk最少被引用1次
            maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
            maxInitialRequests: 3, // 入中js文件最大并行请求数量
            automaticNameDelimiter: '~', // 名称连接符 vendors~xxx.js 因为这个里是~
            name: true, //可以使用命名规则
            cacheGroups: { // 分割chunk的组
                // node_modules文件会被打包到vendors --> vendors~xxx.js xxx是模块名称
                // 满足上面的公共规则：如：大小超过30kb,至少被引用一次
                vendors: { // vendors~xxx.js 因为这个里是vendors
                    test: /[\\/]node_modules[\\/]/,
                    // 打包的优先级
                    priority: -10
                },
                default: {
                    // 要提取的chunk最少被引用2次
                    minChunks: 2,
                    // 优先级
                    priority: -20,
                    // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
                    reuseExistingChunk: true
                }
            }
            */
        },
        // 将当前模块的记录其他模块的的hash单独打包为一个文件runtime
        // 解决：修改a文件导致b文件contenthash变化
        runtimeChunk: {
            name: entrypoint => `runtime-${entrypoint.name}`
        },
        minimizer: {
            // 配置生产环境的压缩方案：js和css
            new TerserWebpackPlugin: {
                // 开启缓存
                cache: true,
                // 开启多进程打包
                parallel: true,
                // 启动source-map
                sourceMap: true
            }
        }
    }
}