首页 > 技术文章 > webpack(11)配置eslint语法检查

maycpou 2021-03-15 21:56 原文

1.使用eslint-loader对js文件进行语法检查,eslint-loader可以配置很多种不同的语法检查规则,这里使用airbnb-base语法规则进行检查

2.安装包:npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

3.在package.json中新增项,eslint-loader会找这个项来确定语法检查规则:

 "eslintConfig":{
    "extends":"airbnb-base"//表示配置的检查规则是airbnb-base
  }
4.在webpack.config.js文件中配置使用eslint-loader:
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports={
    entry:{
        vender:['./src/js/jquery.js','./src/js/common.js'],
        index:'./src/js/index.js',
        cart:'./src/js/cart.js'
    },
    output:{
        path:resolve(__dirname,'build'),
        filename:'[name].js'
    },
    mode:'development',
    module:{
        rules:[
            //{test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
            {test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
            {test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
            {test:/.(jpg|png)$/,use:[{ loader:'url-loader',options:{
                publichPath:'./images',
                outputPath:'images/',
                limit:1024*16,
                name:'[name].[ext]'
            }}]},
            {test: /\.(html)$/, use:['html-loader']},
            {exclude:/\.(js|json|html|css|less|scss|png|jpg|jpeg|gif)$/,use:[{loader:'file-loader',options:{
                publichPath:'./svg',
                outputPath:'svg/',
                name:'[name].[ext]'
            }}]},
            {
                test:/\.js$/,//表示只处理js文件
                exclude:/node_modules/,//表示node_modules中的js文件不进行语法检查,因为node_modules文件夹中都是下载的包,一般不进行检查
                loader:'eslint-loader',
                options:{
                    fix:true//这个选项表示启动自动修复功能,如果缺少空格换行之类的。如果不启用这个所有的这些问题都为报错,一个个的修改起来比较繁琐
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            chunks:['vender','index']
        }),
        new HtmlWebpackPlugin({
            template:'./src/cart.html',
            filename:'cart.html',
            chunks:['vender','cart']
        }),
        new MiniCssExtractPlugin({
            filename:'index.css'
        }),
        //new OptimizeCssAssetsPlugin()

    ]
}

推荐阅读