Webpack打包

一、模块打包工具的由来

模块化产生的问题：

• ES Modules 存在环境兼容问题
• 模块文件过多，网络请求频繁
• 所有的前端资源都需要模块化

从开发到生产模块化可以达到要求

• 新特性代码编译
• 模块化 JavaScript 打包
• 支持不同类型的资源模块

二、模块打包工具概要

Webpack 作为 模块打包器（Module bundler）
有兼容问题的代码通过 模块加载器（Loader）对其进行编译转换
代码拆分（Code Splitting）按照我们的需求去拆分文件
Webpack 支持我们以任意的资源模块（Asset Module）去加载文件
打包工具解决的是前端整体的模块化并不单指JavaScript模块化

三、Webpack快速上手

Webpack 4的版本按照约定将
‘src/index.js’-> ‘dist/main.js’ 作为打包入口

四、Webpack 配置文件

• production 用yarn webpack 自动优化打包结果
• development 用 yarn webpack --mode development 作为开发模式下可以自动优化打包速度添加一下调试过程中需要的辅助
• none 用 yarn webpack --mode none,none 模式webpack做最原始的打包不会做任何的处理

目前工作模式只有这三种三种工作模式的区别

五、Webpack 工作模式

六、Webpack 打包结果运行原理

七、Webpack 资料模块加载

Loader 是 Webpack 的核心特性，
借助于Loader 就可以加载任何类型的资源

八、Webpack 导入资源模块

打包入库 --》运行入口
JavaScript 驱动整个前端应用的业务

• 逻辑合理，JS 确实需要这些资源文件
• 确保上线资源不缺失，都是必要的
  
  Webpack建议 根据代码的需要动态导入资源，因为真正需要资源的不是应用，而是代码

九、Webpack 文件资源加载器

十、Webpack URL 加载器

Data URLs 与 url-loader

• 超过 10KB 文件单独提取存放
• 小于 10KB 文件转换为 Data URLs 嵌入代码中

十一、Webpack 常用加载器分类

1. 编译转换类
   css-loader
2. 代码质量检查类
   eslint-loader
3. 文件操作类
   file-loader

十二、Webpack 与 ES 2015

webpack 因为模块打包需要，所以处理import 和 export

• webpack 只是打包工具
• 加载器可以用来编译转换代码

十三、Webpack 加载资源的方式

webpack

• 遵循 ES Modules 标准的 import声明
• 遵循 CommonJS 标准的 require 函数
• 遵循 AMD 标准的 define 函数 和 require函数
  如非必要不要混合用这些
  另外webpack
  Loader 加载的非 JavaScript 也会触发资源加载
  例如 css-loader 样式代码中的 @import 指令和 url 函数
  HTML 代码中的图片标签的 src 属性

十四、Webpack 核心工作原理

十五、Webpack开发一个Loader