Webpack

大白话自我理解：

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

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

Webpack 主要功能

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

• 热更新(Hot Module Replacement): Webpack 支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。

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

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

• 插件系统: 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 的问题