构建 Webpack 知识体系 ｜ 青训营

xio
107 阅读3分钟

为什么要学习 Webpack

  • 理解前端“工程化”的概念、工具、目标；

  • 提升个人的核心竞争力；

  • 高阶前端的必经之路。

什么是 Webpack

前端项目由资源构成！【图片文件、JS、TS、CSS……】

管理资源的突出问题

  • 依赖手工，操作繁琐，容易出错且限制规模；
  • 当代码文件之间有依赖的时候，就得严格按依赖顺序书写；
  • 开发与生产环境一致，难以接入TS或JS新特性；
  • 比较难接入Less、Sess等工具；
  • JS、图片、CSS资源管理模型不一致；
  • ……

出现了很多工程化的工具

某种程度上，正是这些工具的出现，才有了“前端工程”的概念。

什么是Webpack

本质上是一种前端资源编译、打包的工具。

  • 多份资源文件打包成一个 Bundle；
  • 支持 Babel、Eslint、TS、CoffeScript、Less、Sass；
  • 支持模块化处理css、图片等资源文件；
  • 支持HMR+ 开发服务器；
  • 支持持续监听、持续构建；
  • 支持代码分离；
  • 支持 Tree-shaking；
  • 支持 Sourcemap；
  • ……

Webpack 的操作

01 使用Webpack

  1. 安装

Npm i -D webpack webpack-cli

  1. 编辑配置文件

  1. 执行编译命令

npx webpack

02 核心流程

  1. 入口处理 Get Start

从'entry'文件开始，启动编译流程。

  1. 依赖解析/收集 Dependencies Lookup

从'entry'文件开始，根据'require' or 'import'等语句找到依赖资源。

  1. 资源解析 Transform

根据'module'配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容。

递归调用2、3，直到所有资源处理完成。

  1. 资源合并打包 Combine Assets

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。

03 模块化+一致性

  • 支持多个文件资源合并成一个，减少HTTP请求数
  • 支持模块化开发
  • 支持高级JS特性
  • 支持Typescript、CoffeeScript等方言
  • 统一图片、CSS、字体等其他资源的处理模型

04 配置总览

流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置类。

工具类：主流程之外，提供更多工程化能力的配置项。

流程类配置

  1. 输入

    'entry'、'context'

  2. 模块解析

    'resolve'、'externals'

  3. 模块转译

    'module'

  4. 后处理

    'optimization'、'mode'、'target'

按使用频率

'entry / output'

'module / plugins'

'mode'

'watch / devServer / devtool '

参考资料

Webpack 配置官方文档：webpack.js.org/configurati…

05 声明

  1. 声明入口 'entry'
  2. 声明产物出口 'output'
  3. 运行 'npx webpack'
const path = require('path')

module.exports = {
    entry = '.src/index',
    // mode = "production",
    // devtool : false,
    output:{
        filename : 'bundle.js',
        path: path.join(_dirname,'./dist')
    }
}

06 处理CSS

  1. 安装Loader

  1. 添加'module'处理css文件

Loader：

参考资料

Css-loader：github.com/webpack-con…

Webpack 原理系列七：如何编写 Loader：mp.weixin.qq.com/s/TPWcB4MfV…

Style-loader：webpack.js.org/loaders/sty…

07 接入Babel

  1. 安装依赖

  1. 声明产物出口 'output'

  1. 执行 'npx webpack'

Babel:

参考资料

Babel-loader：webpack.js.org/loaders/bab…

Babel 官网：babeljs.io/

@babel/preset-env:babeljs.io/docs/babel-…

@babel/preset-react:babeljs.io/docs/babel-…

@babel/preset-typescript:babeljs.io/docs/babel-…

08 HTML

  1. 安装依赖

  1. 声明产物出口 'output'

  1. 执行 'npx webpack'

生成 HTML：

参考资料

HtmlWebpackPlugin:webpack.js.org/plugins/htm…

09 工具线

（1）HMR

定义：Hot Module Replacement 模块热替换

它是Webpack中最实用的功能之一，可以在不刷新整个页面的情况下，替换、添加或删除模块，快速更新网页内容，提高开发效率。

使用：

  1. 开启HMR

  1. 启动Webpack

npx webpack serve

参考资料：

Webpack 原理系列十：HMR 原理全解析：mp.weixin.qq.com/s/cbYMpuc4h…

（2）Tree-Shaking

本质：删除没有用到的代码。

Dead Code

  • 代码没有被用到，不可传达；
  • 代码的执行结果不会被用到；
  • 代码只读不写；

Tree-Shaking

  • 模块导出了，但未被其它模块使用。

开启 tree-shaking：

'mode':"production"

'optimization.usedExports:true'

（3）其它工具

  • 缓存
  • Sourcemap
  • 性能监控
  • 日志
  • 代码压缩
  • 分包
  • ……

参考资料：

awesome-webpack-4plus：github.com/Tecvan-fe/a…

深入浅出webpack：webpack.wuhaolin.cn/

Survivejs-webpack Book：survivejs.com/webpack/pre…

如何学习Webpack

入门级：学会灵活应用

进阶：学会拓展Webpack

大师：源码级理解 Webpack 打包编译原理

avatar
文章
阅读
粉丝