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

        ]
    }
  • 相关阅读:
    Mybatis-Plus的应用场景及注入SQL原理分析
    玩转直播系列之消息模块演进(3)
    Kafka万亿级消息实战
    玩转直播系列之RTMP协议和源码解析(2)
    Tars-Java客户端源码分析
    玩转直播系列之从 0 到 1 构建简单直播系统(1)
    如何把 Caffeine Cache 用得如丝般顺滑?
    kubenets 配置Pod的 /etc/hosts
    kubernetes之多容器部署pod以及通信
    k8s master调度pod
  • 原文地址:https://www.cnblogs.com/maycpou/p/14540232.html
Copyright © 2011-2022 走看看