# webpack5实战

**Repository Path**: moaijun/webpack5

## Basic Information

- **Project Name**: webpack5实战
- **Description**: 基于最新webpack5.70.0版本搭建的一套vue、react工程化模板以及解析ts文件配置
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-03-29
- **Last Updated**: 2024-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webpack5, 打包工具

## README

# webpack5实战

### 介绍
基于最新版本的 Webpack5.70.0 所搭建的一套基础工程化配置；区分开发环境以及生产环境配置，包含模块热更新hot，代理proxy，style、css、less样式编译，postcss预设集合，babel预设集合，babel-typescript，vue-loader以及react-refresh等配置功能。详情请参考 **特技**。

### 安装教程

1.  git clone https://gitee.com/moaijun/webpack5.git
2.  cd webpack5
3.  npm install
4.  npm run serve

### 使用说明

1.  npm run serve 启动本地服务
2.  npm run serve:ts 校验ts语法的正确性并且启动本地服务
3.  npm run build 打包
4.  npm run build:ts 校验ts语法的正确性并且打包
5.  npm run check:ts 校验ts语法的正确性

### 特技
#### .browserslistrc文件说明
[Browser usage table](https://caniuse.com/usage-table)

此文件告知了当前项目代码编译需要兼容哪些浏览器版本；当使用postcss以及babel编译时，都会按照当前文件配置来进行代码的兼容性写法；如postcss预设会为css属性添加前缀兼容浏览器；bable预设会判断是否需要将const、let声明转换为var声明等。

#### CSS编译
+ style-loader
+ css-loader
+ postcss-loader
+ less-loader

1. `['style-loader', 'css-loader', 'postcss-loader', 'less-loader']`，css-loader需设置 `importLoaders: 2`；
2. webpack中loader加载的顺序是从右到左，从下往上的顺序；所以上面的加载顺序为less->postcss->css->style；
3. importLoaders属性是为了解决css中文件引入`@import './font.css'`，导致css-loader右侧编译器（postcss、less）编译失败的问题：

#### webpack模块热更新以及proxy代理
+ webpack
+ webpack-cli        package.json中使用的webpack指令
+ webpack-dev-server 开启本地服务
+ webpack-merge      合并webpack的多个配置文件

1. 安装webpack-dev-server；
2. 在webpack.config.js设置devServer对象；
3. hot:true,开启热更新；
4. proxy对象设置`target, changeOrigin [,pathRewrite]`三个属性；

#### Vue
+ vue@2
+ vue-loader@15
+ vue-template-compiler

1. vue-loader@15版本需要配置VueLoaderPlugin插件才能使用；
2. 在node_modules/vue-loader/lib目录中找到plugin.js文件，然后webpack.config.js引入`const VueLoaderPlugin = require('vue-loader/lib/plugin')`；
3. 在plugins中使用`new VueLoaderPlugin()`；
4. webpack中所有的plugin(插件)都是类，使用方式为`new Function()`；

#### React
+ react@16
+ react-dom@16
+ react-refresh@0.11.0  react组件局部刷新
+ @pmmmwh/react-refresh-webpack-plugin react组件局部刷新
+ @babel/preset-react

1. webpack.config.js配置插件`const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')`；
2. babel.config.js需配置插件`plugins: [ ['react-refresh/babel'] ]`；react-refresh仅在开发环境使用。
#### TypeScript
[TypeScript是JavaScript的超集](https://www.tslang.cn/docs/home.html)
+ typescript
+ @babel/preset-typescript
+ ts-loader（未使用）

#### babel
[Babell-下一代javascript编译器](https://www.babeljs.cn/docs/)
+ @babel/cli
+ @babel/core
+ @babel/preset-env babel   预设集合，里面带有很多babel插件提供支持
+ @babel/preset-react
+ @babel/preset-typescript
+ babel-loader

1. 在使用`@babel/preset-env`预设时，需进行配置，设置`{useBuildIns:usage; corejs:3}`；
2. useBuildIns:usage代表babel编译时按需编译，代码中有啥编译啥，不会编译多余的代码；
3. corejs:3代表使用core-js的主版本为3，不设置的话默认为2，当前项目安装的为版本3，所以设置为3；

#### babel-polyfill
polyfill 指的是“用于实现浏览器不支持原生功能的代码”，Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

+ core-js
+ regenerator-runtime

#### postcss
[postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具](https://github.com/postcss/postcss/blob/main/docs/README-cn.md)
+ postcss
+ postcss-loader
+ postcss-preset-env postcss预设集合，里面带有很多插件提供支持，如：autoprefixer

#### 其他插件

+ clean-webpack-plugin            生产环境build时自动删除dist文件夹
+ copy-webpack-plugin             build时复制无需打包的文件
+ html-webpack-plugin             自动生成index.html文件
+ webpack-dev-middleware          将webpack编译文件包装为中间件
+ cross-env                       跨平台配置环境变量，package.json中使用配置环境变量NODE_ENV

未安装：
+ compression-webpack-plugin      整体资产压缩
+ image-minimizer-webpack-plugin  图片压缩
+ css-minimizer-webpack-plugin    使用 cssnano 优化和压缩 CSS


#### 手写本地反向代理server、proxy-server
+ express
+ http-proxy-middleware
+ webpack-dev-middleware