从零搭建Webpack5-react脚手架(附源码)

webpack5

近期终于有时间和精力专注于公司技术基础建设了，于是一开始，将公司的Saas系统改造成了微前端模式，解决了历史遗留的一部分问题

接着，想着webpack5已经发布这么久了，该在生产环境用起来了，也顺势想推动微前端、webpack5、vite在业内的普及率,没看过我之前文章的朋友可以在文末找找,干货真的很多

正式开始

webpack5升级后，有哪些改变？

• 通过持久化缓存提高性能
• 采用更好的持久化缓存算法和默认行为
• 通过优化 Tree Shaking 和代码生成来减小Bundle体积（干掉了nodejs的polyfill）
• 提高 Web 平台的兼容性
• 清除之前为了实现 Webpack4 没有不兼容性变更导致的不合理 state
• 尝试现在引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 Webpack 5
• 新增Module Federation(联邦模块) 搭建指南 推荐大家使用我在我们公司(深圳明源云空间)做的脚手架，给大家一键生成项目模板，这样大家在看本文的时候会得到更好的提升

生成模板步骤：

npm  i ykj-cli -g 
ykj init webpack5 （这里选择通用项目模板）
cd webpack5
yarn 
yarn dev

开始搭建

首先新建文件夹，使用yarn初始化项目

下载webpack webpack-cli最新版本:

然后安装React react-dom17版本的库

接着安装官方热更新推荐的库

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热更新依赖

接着编写配置

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

编写第一个单元测试,引入依赖:

import App from '../src/App';
import { mount, shallow } from 'enzyme';
import React from 'react';
import toJson from 'enzyme-to-json'; //做快照

然后就可以愉快的开始写单元测试了哦

• 这样，一个webpack5的脚手架就搭建好了，webpack内置的一些东西，可以让我们省去很多配置，看起来会更简单