构建 Webpack 知识体系入门 | 青训营

为什么要学习 Webpack

1. 理解前端"工程化"概念、工具、目标
2. 一个团队总要有那几几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
3. 高阶前端必经之路

01.什么是 Webpack

• 本质上是一种前端资源编译、打包工具：
• 多分资源文件打包成一个 Bundle
• 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片 等资源文件
• 支持 HMR + 开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持 Tree-shaking
• 支持 Sourcemap

02.使用 Webpack

1.安装

npm i -D webpack webpack-cll

2.编译配置文件

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

3.执行编译命令

npx webpack

核心流程 ———— 极度简化版

1.入口处理 (Get start)——>

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

——>2.依赖解析(Dependdencies Lookup)

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

——>3.资源解析(Transform)

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

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

——>4.资源合并并打包(Combine Assets)

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

模块化 + 一致性

1. 多个文件资源合并成一个，减少 http 请求数
2. 支持模块化开发
3. 支持高级 JS 特性
4. 支持 Typescript、CoffeScript 方言
5. 统一图片、CSS、字体 等其他资源的处理模型
6. ETC...