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

        ]
    }
  • 相关阅读:
    Muddy Fields
    LightOJ 1321
    LightOJ 1085
    LightOJ 1278
    LightOJ 1341
    LightOJ 1340
    vijos 1426 背包+hash
    vijos 1071 01背包+输出路径
    vijos 1907 DP+滚动数组
    vijos 1037 背包+标记
  • 原文地址:https://www.cnblogs.com/maycpou/p/14540232.html
Copyright © 2020-2023  润新知