• 打包工具由来
      • 解决环境兼容性问题
      • 模块多，请求频繁
      • 所有的前端资源都需要模块化

    • 需要做到
      • 可以使用模块化优势，又不需担心模块化的影响
      • 编译代码
      • 将模块打包到同一文件当中，不需要多次请求
      • 支持多种资源文件类型
    • 打包工具概要
      • 模块打包器
        • 在打包过程中loader转换
      • 代码拆分
        • 将代码按照我们的需要去打包
      • 资源模块
        • 以模块化的方式加载任意资源模块
      • 解决的是前端整体的模块化，并不单指JS的模块化
    • Webpack快速上手
    • webpack配置文件
      • src/index.js ->dist/main.js 默认的 ```javascript const path = require(“path”) //node环境下 module.exports = { entry: “./src/main.js”, //指定入口文件 ./不能省略 output: { filename: “bundle.js”, //输出文件名称 path: path.join(__dirname, “output”), //指定文件输出的目录 }, }
    2. - webpack工作模式
    3.    - 默认是production
    4.    - 加参数
    5.       - --mode development 开发模式
    6.          - 优化打包速度，添加调试的辅助
    7.       - --mode none 
    8.          - 运行最原始状态的打包，不会做其它的处理
    9.    - 在配置中指定，不需要手动指定
    10. - webpack打包结果运行原理
    11. - webpack资源模块加载
    12.    - webpack默认只支持处理js代码
    13.    - 加载其它的资源文件需要添加loader 来处理文件 
    14. - webpack导入资源文件
    15.    - 代码需要的时候动态的引入资源文件
    16.    - 在js代码中引入
    17.    - 是代码需要资源文件不是应用
    18.       - 逻辑合理，js需要
    19.       - 确保上线资源文件都是必要的
    20. - webpack文件资源加载器
    21.    - file-loader
    22.    - 打包时碰到文件，将文件拷贝到输出目录，将路径返回
    23. - webpack URL加载器
    24.    - Data URLs
    25.       - 当前url直接可以表示文件内容的方式，使用的时候不会发送http请求
    26.          - data:image/png;base64,iiiiiii....
    27.       - 使用体积比较小的文件
    28.    - 小文件使用,减少请求次数
    29.    - 大文件单独提取存放，提高加载速度
    30.    - 通过配置文件实现
    31. ```javascript
    32. module: {
    33.         rules: [
    34.             {
    35.                 test: /.css$/, //正则匹配文件
    36.                 use: ["style-loader", "css-loader"], //使用的Loader,从后往前执行
    37.             },
    38.             {
    39.                 test: /.png$/,
    40.                 use: {
    41.                     loader:"url-loader",
    42.                     options:{ //配置选项，需要安装file-loader
    43.                         limit:10 * 1024 //10kb 限制大小 10kb一下的文件转换 ，超过10kb的文件交给file-loader
    44.                     }
    45.                 },
    46.             },
    47.         ], //其它文件加载规则的配置
    48.     },
    • webpack常用加载器分类
      • 编译转换类
        • 将模块转化为js代码，实现js运行css
      • 文件操作类型加载器
        • 加载到的资源模块拷贝到输出的目录
        • 导出访问路径
      • 代码检查类
        • 统一代码风格，提高代码质量

    • webpack处理es6

      • webpack使用babel来处理
      • 只是打包工具
        1. {
        2.            test: /.js$/,
        3.            use: {
        4.                loader:"babel-loader",
        5.                options:{
        6.                    presets:['@babel/preset-env']
        7.                }
        8.            }
        9.        },

    • webpack加载模块方式

      • 遵循 ES Modules
      • CommonJS
      • AMD
      • 项目最好只使用一种标准
      • 样式代码中的import 指令和url函数也会触发相应资源模块加载
      • HTML代码中src属性
    • webpack核心工作原理
      • 先找到一个入口文件，在入口文件代码中的Import或require，解析每个模块对应的依赖
      • 生成依赖树
      • 递归依赖数，找到每个节点的资源文件
      • 根据配置文件的rules属性找到模块对应的加载器
      • 交给对应的加载器处理
      • 放到bundle.js里边
    • loader是webpack的核心