程序员优雅哥(youyacoder)简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要：主要讲解运用Webpack 5 中集成 ESLint 的方法与步骤

为了统一团队代码的开发风格，避免一些不必要的麻烦，我们有必要引入eslint做代码检查。

4年前给一个美术馆做的微信公众号门票售卖H5、后台管理系统以及核销app，最近客户要求升级一些功能，由于是老项目了，当我读着以前写的烂代码，觉得这次很有必要重构一下框架，升级一下插件了。

心里是很有干劲的，但是这次升级竟硬硬的肝了我3个日夜，用了各种搜索引擎以及chatgtp等工具，教训依然惨痛！每一次取得进展之后总觉得胜利在望之时，却又总是被折磨的死去活来，每个晚上本打算11点结束战斗，却最后都是毫无例外被逼着熬到凌晨2点，而且最后都是带着问题被迫去睡觉，这对于一个37岁的老程序员来说极其难受！

目录

1. 前言
2. 初始化项目
3. webpack基础配置

除了特定的 webpack loader对相应格式的数据文件解析之外，还可以通过自定义相应的JSON模块，完成对toml、yaml 或 json5等常用数据库格式文件的解析。

初始化示例工程

创建一个自定义数据格式文件解析的工程：webpack-parsedatafile。并进行初始化出操作：

一、基本使用

1. 概念

一个月，利用业余时间程序员优雅哥完成了Webpack 5 & SpringBoot的学习，内心觉得很是欣慰。对于一个老程序员，一直走在学习的道路上，几年前就想过坚持边学习边整理边记录边分享。在这一个月的分享中，收获了很多的鼓励，让我觉得一个技术男也可以胜任一些文字工作。其次，通过这样的方式可以帮助我们系统性，深入性学习每一个主题，把自己多年积累的项目实战经验与理论知识进行更好结合。

时候我们一个chunk引入了多个js文件，导致打包后的chunk提交太大；再或者多个chunks引入了同一个js文件（例如jquery），此时jquery会分别打包进两个chunk中，导致文件重复打包，体积臃肿；

作为最常用的前端打包工具之一，Webpack已成为前端工程化的基础设施之一。自2020年10月10日发布Webpack5以来，已经过去了两年，而之前的大版本Webpack4的更新则是在两年前。每个大版本的更新都会带来许多改变和提升。今天我们来看看增量编辑和长期缓存。

前面一节，我们搭建好了一个脚手架（