Webpack

大白话自我理解：

现在前端项目开发，多使用 React、vue 等前端框架，以及 ES6 模块语法、Sass 等 css 预处理器，以及其他媒体资源，这些项目代码无法直接在浏览器运行。

webpack 就是将项目文件打包编译成浏览器能够运行的 html、css、js 文件的项目打包工具，同时 webpack 还具备 压缩代码、代码兼容性处理等特性，大大的提升代码性能

Webpack 主要功能

• 模块打包: 将项目中的所有模块(JavaScript、Css、图片等)当作一个整体通过依赖关系将它们打包成一个或多个静态资源文件

• 依赖管理: Webpack 可以分析模块之间的依赖关系根据配置的入口文件找出所有依赖的模块，并将其整合到打包结果中。

• 文件转换: 通过加载器(Loader)的使用，可以将其他类型的文件(如 CSS、LESS、图片等)转换为有效的模块

• 代码拆分: Webpack 支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。

• 插件系统: Webpack 提供了丰富的插件系统，可以通过插件实现各种功能的扩展，例如压缩代码自动生成 HTML 文件等。

• webpack 中文文档 (opens new window)
• Webpack--入门只看这一篇就够了(图文＋代码）_CSDN—小庄 zzz (opens new window)

学习前提

• 了解 vue/react 等框架项目开发文件结构
• 了解 npm 使用，npm install 依赖库安装
• 了解 Window CMD 命令行 使用
• 了解 node 安装

⭐ 快捷使用 webpack.config.js 配置

TIP

• 参见仓库 https://github.com/sam9029/s9_webpack_guide (opens new window)

目录

基础指南 ⭐

• 了解
• 基本 config 配置使用
  • 文件路径别名
• 处理样式资源
• 处理图片资源
• 修改输出文件目录
  • 自动清空上次打包内容
• 处理字体图标资源
• 处理其他资源--视频音频
• 深度处理 JS 资源 (JS 资源的 代码检测 Eslint & Babel 兼容语法处理 有 ES6+ 转 ES5 )
  • 配置 Eslint 代码检测
  • 配置 Babel 语法兼容
• 处理 Html 资源
• 热更新文件变动自动编译
• 配置开发和生产模式的 webpack.config.js（可以在此处查看 基础指南完整的 webpack.config.js 配置 和 package.json）
• 提取单独的 CSS 文件&压缩 CSS 文件
• 拷贝项目文件资源到构建目录

高级--打包优化指南

提效和调试工具

• ⭐SourceMap 源码映射设置 定位开发之后 Bug 的报错
• ⭐ 可视化依赖树分析

提升打包构建速度

• ⭐ 热加载设置 提升开发时（开发模式）的效率
• loader 配置 oneOf 提升打包构建的速度---用于大型项目
• ⭐config 文件 include 和 exclude 配置 提升打包构建的速度
• 设置 Cache 开发环境--提升打包构建的速度
• Thead 开启多线程打包 生产环境--提升打包构建的速度

减少代码体积

• ⭐TreeShaking
• ⭐Babel 辅助代码块引入
• ImageMinimizer 图片压缩

优化代码运行性能

• ⭐CodeSplit 代码分割
  • ⭐import()动态引入文件
• Preload 和 Prefetch 文件预加载
• ⭐Corejs 语法兼容性补丁
• NetworkCache 利用文件名称实现网络资源缓存
• [PWA离线访问--UN]

项目实战优化

• 纯JS脚手架项目配置

  • 参考 https://github.com/sam9029/s9_webpack_guide 的 common_demo 文件

• Vue项目脚手架配置

  • 文档：一步一步搭建Vue项目脚手架教程-全流程完整版
  • 参考 https://github.com/sam9029/s9_webpack_guide 的 vue_cli_demo 文件

• React项目脚手架配置UN

原理浅解

• [loader原理浅解]

• [plugin原理浅解]

常见报错

exports is not defined 的问题