在 Web 开发中，我们经常会使用 Webpack 这个工具对 JavaScript 代码进行打包。同时，为了保证代码质量和风格一致，我们也需要使用 ESLint 对代码进行检查。那么，如果能将 ESLint 集成到 Webpack 中，将会非常方便。而这正是我们要介绍的 npm 包 webpack-eslint-plugin。
安装
在使用 webpack-eslint-plugin 之前，你需要先安装 Webpack 和 ESLint：
npm install webpack eslint --save-dev
然后，你就可以安装 webpack-eslint-plugin：
npm install webpack-eslint-plugin --save-dev
配置
在 Webpack 配置文件中，我们需要引入 webpack-eslint-plugin 并进行相关配置：
-- -------------------- ---- -------
----- ------------------- - ---------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
-- ---
-- ---
---
--
--在配置项中，可以传入 ESLint 的配置项，例如：
new WebpackEslintPlugin({
formatter: require('eslint-friendly-formatter'),
emitWarning: true,
failOnError: true,
configFile: path.resolve(__dirname, '../.eslintrc.json'),
context: path.resolve(__dirname, '..'),
resolvePluginsRelativeTo: __dirname,
}),这些配置项都是可以根据自己的需要进行配置的。其中，formatter 用于指定 ESLint 的输出格式；emitWarning 和 failOnError 分别控制是否告警和是否报错；configFile 可以指定 ESLint 的配置文件路径；context 可以指定 ESLint 的上下文路径；resolvePluginsRelativeTo 可以指定插件的解析路径。
示例
在下面的示例中，我们将创建一个简单的项目，并使用 webpack-eslint-plugin 进行配置。
首先，我们需要创建一个目录并初始化 npm：
mkdir example && cd example npm init -y
然后，安装我们所需要的依赖：
npm install webpack webpack-cli webpack-eslint-plugin eslint eslint-config-airbnb-base --save-dev
在根目录下创建 index.js 文件，将以下内容粘贴进去：
let a = 1; let b = 2; console.log(a + b);
接着，在根目录下创建 webpack.config.js 文件，将以下内容粘贴进去：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------- - ---------------------------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- ---------------------
------------ -----
------------ -----
----------- ----------------------- ------------------
---
--
--再在根目录下创建 .eslintrc.json 文件，将以下内容粘贴进去：
{
"extends": "airbnb-base"
}最后，我们运行 Webpack：
npx webpack
你会发现，Webpack 成功将代码打包，并检查了代码风格。
结语
到这里，我们已经介绍了 npm 包 webpack-eslint-plugin 的使用教程。通过集成 ESLint 到 Webpack 中，我们能够非常方便地进行代码质量和风格的检查。如果你还没有使用 webpack-eslint-plugin，现在就可以尝试一下啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc87