webpack5
近期终于有时间和精力专注于公司技术基础建设了，于是一开始，将公司的Saas系统改造成了微前端模式，解决了历史遗留的一部分问题
接着，想着webpack5已经发布这么久了，该在生产环境用起来了，也顺势想推动微前端、webpack5、vite在业内的普及率,没看过我之前文章的朋友可以在文末找找,干货真的很多
正式开始
webpack5升级后，有哪些改变？
- 通过持久化缓存提高性能
- 采用更好的持久化缓存算法和默认行为
- 通过优化 Tree Shaking 和代码生成来减小Bundle体积（干掉了nodejs的polyfill）
- 提高 Web 平台的兼容性
- 清除之前为了实现 Webpack4 没有不兼容性变更导致的不合理 state
- 尝试现在引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 Webpack 5
新增Module Federation(联邦模块)搭建指南 推荐大家使用我在我们公司(深圳明源云空间)做的脚手架，给大家一键生成项目模板，这样大家在看本文的时候会得到更好的提升
生成模板步骤：
代码语言：javascript复制npm i ykj-cli -g
ykj init webpack5 （这里选择通用项目模板）
cd webpack5
yarn
yarn dev开始搭建
首先新建文件夹，使用yarn初始化项目
下载webpack webpack-cli最新版本:
然后安装React react-dom17版本的库
接着安装官方热更新推荐的库
代码语言：javascript复制yarn add react-refresh -D- 安装
less css style标签 postcss等样式处理的库（mini-css-extract-plugin要安装@next版本的）
yarn add less less-loader css-loader style-loader mini-css-extract-plugin@next -D安装相关babel依赖
babel具体要哪些配置，建议大家参考我的模板里面
完成了依赖的准备工作,开始搭建项目
项目根目录创建文件夹，用于放置配置文件
config文件夹下新建四个文件
在paths文件内，用变量记录几个关键目录:
编写基础webpack.base.js配置文件,引入依赖
编写entry和output字段：
这里要注意的是，
webpack5对contenthash算法进行了优化，这里可以在chunkhash和contenthash中选择一个，建议contenthash
编写基础loader配置:
这里要注意的是：
webpack5对于资源，类似：图片、字体文件等，可以用内置的asset去处理，不用url-loader和file-loader了
接着，由于项目需要配置别名和省略后缀名，我们先配置resolve字段(我是TypeScript React技术栈):
插件的话，由于是基础配置，只要一个clean、html的插件即可
在项目根目录新建文件babel.config.js
这样，我们的基础
webpack配置就好了,捋一捋先：
用babel处理 和高阶语法
用处理语法
用插件处理了和负责清理工作
用字段配置了别名和省略文件后缀
用内置的asset处理了静态文件，例如图片等
引入依赖
先引入了热更新、合并配置、基础配置、官方react热更新依赖
接着编写配置
代码语言：javascript复制const devConfig = {
mode: 'development',
devServer: {
port: 3000,
contentBase: '../dist',
open: true,
hot: true,
},
target: 'web',
plugins: [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()],
devtool: 'eval-cheap-module-source-map',
};
module.exports = merge(common, devConfig);注意：这里要设置
target: 'web'才会有热更新效果
- devtool在开发模式最佳实践是:
eval-cheap-module-source-map
这样，我们的开发模式配置就搭建好了，只要在public文件夹下编写一个index.html，就可以跟之前一样，开始写react项目了
开始编写webpack.prod.js生产配置
引入依赖：
生产环境要抽离css标签，所以这里针对less和css要做特殊处理,一个是postcss处理样式兼容性问题，一个是MiniCssExtractPlugin.loader:
这样生产的配置也编写好了
"build": "webpack --config config/webpack.prod.js --mode production",
"dev": "webpack serve --config config/webpack.dev.js --mode development",配置代码质量管控流程
新增依赖
编写代码、提交检测流程
新增eslint配置：
新增命令：
安装jest等依赖:
新建文件夹 test
编写第一个单元测试,引入依赖:
代码语言：javascript复制import App from '../src/App';
import { mount, shallow } from 'enzyme';
import React from 'react';
import toJson from 'enzyme-to-json'; //做快照然后就可以愉快的开始写单元测试了哦
- 这样，一个
webpack5的脚手架就搭建好了，webpack内置的一些东西，可以让我们省去很多配置，看起来会更简单
