Webpack 打包 - 11. eslint 语法检查

使用 eslint 对 js 进行语法检查

1.文件结构

2.安装 eslint 相关插件

$ npm i eslint@6.8.0  eslint-loader@3.0.3  eslint-plugin-import@2.20.1  eslint-config-airbnb-base@14.0.0  -D

安装完成后，在 package.json 文件中配置 eslintConfig:

"eslintConfig":{

　　"extends":"airbnb-base"

}

 

3.代码

index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
复制代码

index.js

function add(x, y) {
  return x + y;
}

// 下一行 eslint 所有规则都失效(下一行不进行 eslint 检查)  加上下面这一句，就没有eslint警告信息了
// eslint-disable-next-line
console.log(add(1, 2));

webpack.config.js

复制代码
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: "js/built.js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /*
            * 语法检查: eslint-loader  eslint
            *   注意: 只检查自己的源代码，第三方库是检查不到的
            *   设置检查规则:
            *       package.json 中 eslintConfig 中设置~
                         "eslintConfig": {
                            "extends": "airbnb-base"
                          }

                 * airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
            *
            * */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    //自动修复 eslint 的错误
                    fix: true
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development",
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
}
复制代码

 

4.打包

$ webpack

 

end~

posted @   Evengod  阅读(295)  评论(0)  编辑  收藏  举报
相关博文：
· Wenpack 打包 - 15. 生产环境配置(提取JS中的CSS、压缩CSS、压缩html、eslint语法检查...)
· webpack优化环境配置 - 25.pwa
· js语法检查eslint
· webpack配置js 语法检查 eslint
· webpack配置js 语法检查 eslint
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示