基于流程了解webpack

# 基于流程了解webpack

## 一、概述

    - 目的:自动化构建代码
    - 流程:
        1. 搜索所有依赖模块
        2. 解析模块
        3. 打包
        4. 再次打包
    - 环境:开发环境、测试环境、生产环境

## 二、流程概览

### 0、整个构建

    主要配置项
    - entry:入口文件
    - resolve:搜索匹配规则
    - module.rules:解析规则
    - plugins:插件功能
    - optimization:优化构建的项目
    - output:输出文件及相关配置
    - devServer:本地开发及相关配置(用于开发环境)
    其它
    - 记录构建耗时:speed-measure-webpack-plugin
    - 添加运行时的环境变量:webpack.definePlugin、dotenv-webpack
    - 动态生成包含资源路径的html:html-webpack-plugin

### 1、搜索所有依赖模块

    该阶段主要通过配置项entry为入口文件,确定所有依赖的模块构成依赖树
    - 减小搜索的范围:配置项resolve

### 2、解析模块

    - 减少不必要的解析:为loader添加exclude
    - 提取css并生成source map:mini-css-extract-plugin
    - 语法编译:babel-loader
    - 优化开销大的解析:thread-loader(多线程解析)

### 3、打包

    - 减少单个包的大小,按需加载的支持:optimization.(splitChunks、runtimeChunk)
    - 提高压缩速度:terser-webpack-plugin(多线程压缩)
    - 压缩css:optimize-css-assets-webpack-plugin
    - 将静态资源复制到打包文件夹:copy-webpack-plugin

### 4、再次打包

    - 将第三方的文件缓存:webpack.HashedModuleIdsPlugin、dll(需添加dll配置文件)

## 三、名词注解

    - 运行时(runtime):构建生成的项目处于运行状态时
    - output.publicPath:作用于构建的项目的打包资源的路径前缀,如:打包文件名't/test.js',publicPath='./a/',结果为"./a/t/test.js";publicPath='http://cdn.test.com/app',结果为'http://cdn.test.com/app/t/test.js'
    - devServer.publicPath:启动的开发服务器基于publicPath的值提供服务
    - hash:默认基于当次构建动态生成id,然后基于构建内容生成hash,可通过webpack.HashedModuleIdsPlugin基于文件的相对路径生成id,避免内容不变hash改变
    - chunkhash:针对每个拆分的chunk的内容生成的hash
    - contenthash:一般用于css文件

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据