webpack5 eslint插件使用

EslintWebpackPlugin | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/plugins/eslint-webpack-plugin/#rootList of available rules - ESLint中文文档ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码https://eslint.bootcss.com/docs/rules/

首先，需要安装 eslint-webpack-plugin：

npm i eslint-webpack-plugin eslint -D

webpack.config.js

然后把插件添加到你的 webpack 配置。例如：

const ESLintPlugin = require("eslint-webpack-plugin");
module.exports = {
  // ...
  plugins: [   
    new ESLintPlugin({
      //context指定文件根目录，类型为字符串(检查src下的文件)
      context: path.resolve(__dirname, "src"),
    }),
],
 
};

创建.eslintrc.js文件

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

webpack运行指令

npx webpack

结合VSCode Eslint 插件

但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

根目录创建

• .eslintignore

# 针对vscode中eslint插件检测提示webpack.config.js中配置的src文件之外的文件导致打包报错
dist