# webpack study

**Repository Path**: peng_xi/webpack-study

## Basic Information

- **Project Name**: webpack study
- **Description**: 学习webpack
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-01
- **Last Updated**: 2024-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack study

#### 介绍
学习webpack

#### Webpack高级配置 

1.提升开发体验  
SourceMap  开发使用 cheap-module-source-map 只有行映射, 生产使用 source-map 有行列映射

2.提升打包构建速度

HMR 通过devServer hot 开启 开发模板下重新编译更快,只更新修改的模块  vue使用vue-loader

oneOf 开发、生产都适用  每个文件只能被其中的一个loader配置处理

include exclude 处理js文件  只能使用其中一个

Cache  缓存之前的Eslint检查和Babel编译结果,下次打包就更快了

Terser 多进程打包

3.减少代码体积

Tree Shaking 移除没有使用的js代码  默认生产已打开

Babel  Babel为每个文件插入了辅助代码，使代码体积过大。@babel/plugin-transform-runtime将辅助代码独立，避免重复引入

Image Minimizer 减少图片体积

4.优化代码运行性能
Code Split 1.分割文件 将代码进行分割 2.按需加载 渲染哪个页面就加载某个js文件  optimization.splitChunks配置分割

Preload/Prefetch  浏览器空闲时加载资源   1.Preload立即加载 优先级高 加载当前页面资源  2.Prefetch空闲加载  可以当前也可以下一个资源    共同点:  只加载不执行、都有缓存、兼容性问题

Network Cache  通过contenthash开启缓存，打包只更新改变文件  配置 runtimeChunk

Core-js 解决js兼容性问题，解决babel-loader、@babel/preset-env解决不了的语法   async函数、promise对象、includes方法等 在babel.config.js通过选择配置按需加载

PWA 给项目提供离线体验  通过workbox-webpack-plugin插件完成