zoukankan      html  css  js  c++  java
  • webpack(11)配置eslint语法检查

    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()

        ]
    }
  • 相关阅读:
    用C++做微信公众平台开发的后台开发时,用sha1加密验证的方法
    UART Receive FIFO and Receive Timeout
    Compile cpp File Manually without IDE under Mingw Environment
    html5 返回当前地理位置的坐标点(经纬度)
    逆袭!花两个月吃透这份“MySQL宝典”拿到字节offer
    MySQL约束的概述
    2020-11-28
    人工智能能力提升指导总结
    年轻就该多尝试,教你20小时Get一项新技能
    MySQL~存储过程基本操作
  • 原文地址:https://www.cnblogs.com/maycpou/p/14540232.html
Copyright © 2011-2022 走看看