Webpack知识体系 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第4天，本文主要研究Webpack的基础

这是我参与「第四届青训营」笔记创作活动的第4天，本文主要研究Webpack的基础知识。

什么是Webpack

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

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

使用Webpack

安装

npm i -D webpack webpack-cli

编辑配置文件

/* webpack.config.js */
module.exports = {
    entry: 'main.js',
    output: {
        filename: "[name].js",
        path: path.join(_dirname, "./dist"),
    },
    module: {
        rules:[{
            test: /\.less$/i,
            use: ['style-loader','css-loader','less-loader']
        }]
    }
}

执行编译命令

l npx webpack

核心流程

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

1. 入口处理（Get Start）

从‘entry’文件开始，启动编译流程

2. 依赖解析（Dependencies Lookup）

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

3. 资源解析（Transform）

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

4. 资源合并打包（Combine Assets）

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

模块化 + 一致性

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

配置总览

流程类

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

‘entry/output’
‘module/plugins’
‘mode’
‘watch/devServer/devtool’

工具类

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

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

Webpack知识体系 | 青训营笔记