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

        ]
    }
  • 相关阅读:
    leetcode 190 Reverse Bits
    vs2010 单文档MFC 通过加载位图文件作为客户区背景
    leetcode 198 House Robber
    记忆化搜索(DP+DFS) URAL 1183 Brackets Sequence
    逆序数2 HDOJ 1394 Minimum Inversion Number
    矩阵连乘积 ZOJ 1276 Optimal Array Multiplication Sequence
    递推DP URAL 1586 Threeprime Numbers
    递推DP URAL 1167 Bicolored Horses
    递推DP URAL 1017 Staircases
    01背包 URAL 1073 Square Country
  • 原文地址:https://www.cnblogs.com/maycpou/p/14540232.html
Copyright © 2011-2022 走看看