# webpack5-vue3-ts

**Repository Path**: firzhangyu/webpack5-vue3-ts

## Basic Information

- **Project Name**: webpack5-vue3-ts
- **Description**: webpack5-vue3-ts前端环境构建
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 各个包

#### cross-env：兼容各系统的设置环境变量的包

#### webpack.DefinePlugin：
webpack内置的插件,可以为业务代码注入环境变量

#### style-loader: 
把解析后的css代码从js中抽离,放到头部的style标签中(在运行时做的)

#### css-loader: 
解析css文件代码

#### less-loader: 
解析less文件代码,把less编译为css

#### less: 
less核心

#### postcss-loader：
处理css时自动加前缀(css3兼容)
#### autoprefixer：
决定添加哪些浏览器前缀到css中

#### babel-loader: 
使用 babel 加载最新js代码并将其转换为 ES5（上面已经安装过）

#### @babel/corer: 
babel 编译的核心包

#### @babel/preset-env: 
babel 编译的预设,可以转换目前最新的js标准语法

#### core-js: 
使用低版本js语法模拟高版本的库,也就是垫片

#### copy-webpack-plugin
一般public文件夹都会放一些静态资源,可以直接根据绝对路径引入,比如图片,css,js文件等,不需要webpack进行解析,只需要打包的时候把public下内容复制到构建出口文件夹中,可以借助copy-webpack-plugin插件,安装依赖

#### speed-measure-webpack-plugin:
当进行优化的时候,肯定要先知道时间都花费在哪些步骤上了,而speed-measure-webpack-plugin插件可以帮我们做到

#### thread-loader
就是用来开启多进程解析loader的


    include：只解析该选项配置的模块
    exclude：不解该选项配置的模块,优先级更高


    在开发环境我们希望css嵌入在style标签里面,方便样式热替换,但打包时我们希望把css单独抽离出来,方便配置缓存策略。而插件mini-css-extract-plugin就是来帮我们做这件事的



    可以借助css-minimizer-webpack-plugin来压缩css


    设置mode为production时,webpack会使用内置插件terser-webpack-plugin压缩js文件,该插件默认支持多线程压缩,但是上面配置optimization.minimizer压缩css后,js压缩就失效了,需要手动再添加一下,webpack内部安装了该插件,由于pnpm解决了幽灵依赖问题,如果用的pnpm的话,需要手动再安装一下依赖。



    js中会有未使用到的代码,css中也会有未被页面使用到的样式,可以通过purgecss-webpack-plugin插件打包的时候移除未使用到的css样式,这个插件是和mini-css-extract-plugin插件配合使用的,在上面已经安装过,还需要glob-all来选择要检测哪些文件里面的类名和id还有标签名称, 




    前端代码在浏览器运行,需要从服务器把html,css,js资源下载执行,下载的资源体积越小,页面加载速度就会越快。一般会采用gzip压缩,现在大部分浏览器和服务器都支持gzip,可以有效减少静态资源文件大小,压缩率在 70% 左右。
    nginx可以配置gzip: on来开启压缩,但是只在nginx层面开启,会在每次请求资源时都对资源进行压缩,压缩文件会需要时间和占用服务器cpu资源，更好的方式是前端在打包的时候直接生成gzip资源,服务器接收到请求,可以直接把对应压缩好的gzip文件返回给浏览器,节省时间和cpu。
    webpack可以借助compression-webpack-plugin 插件在打包时生成 gzip 文章