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 @ 2022-09-08 14:47  Evengod  阅读(329)  评论(0)    收藏  举报