webpack 之 js语法检查eslint

左手的ㄟ右手 2023-01-10 10:06 208阅读 0赞

# webpack 之 js语法检查eslint #

// 用来拼接绝对路径的方法
    const {
        resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    
    module.exports = {
        
        // webpack 配置
    
        // 入口起点
        entry : './src/index.js',
        // 输出
        output : {
        
            // 输出文件名
            filename : 'js/built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                /*
                    语法检查：eslint-loader eslint
                        注意：只检查自己写的源代码，第三方的库是不用检查的
                        设置检查规则：
                            package.json 中的 eslintConfig 中的设置
                                "eslintConfig": {
                                    "extends": "airbnb-base"
                                }
                            airbnb 规则
                            1. eslint eslint-config-airbnb-base  eslint-plugin-import  （without React plugins）
                            2. eslint eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y （including ECMAScript 6+ and React）
                */
                {
        
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'eslint-loader',
                    options: {
        
                        // 自动修复 eslint 的错误
                        fix: true
                    }
                }
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
            new HtmlWebpackPlugin({
        
                // 增加一个配置
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
                template : './src/index.html'
            })
        ],
        //模式
        mode : 'development', // 生产模式
        // mode : 'production' // 开发模式
    }

如果想忽略输出警告：

warning  Unexpected console statement  no-console

可以进行如下操作：

// 下一行 eslint 所有规则都失效（下一行不进行 eslint 检查）
    // eslint-disable-next-line
    console.log('*****')