Webpack系列——EsLint 在 Webpack 中的配置

项目中安装 EsLint ：

npm install eslint -S

快速生成 EsLint 的配置文件：

npx eslint --init

运行命令后根据相关选项进行设定，成功操作后会在 src 下看到名为 .eslintrc.js的配置文件，在配置文件中可进行相关语法规范规则的编写。

.eslintrc.js

module.exports = {
    "extends": "airbnb",
    "parser": "babel-eslint"
}

babel-eslint需先 npm install babel-eslint -S安装

可以在命令行中运行 npm eslint src检验 src 下的文件语法

在 webpack 中配置EsLint ：

安装 eslint-loader：

npm install eslint-loader --save-dev

webpack.config.js

module.exports = {
    mode: 'development',
    //...
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            }
        ]
    }
}

在运行打包命令后，会在控制台输出相关的语法错误提示信息。

可以在 devServer 配置项中进行配置 overlay: true，一旦出现语法错误，会在浏览器中弹出蒙层，蒙层上显示相关的语法错误信息。

module.exports = {
    mode: 'development',
    //...
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        overlay: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            }
        ]
    }
}