• oneOf 唯一匹配


    多个 loader,但是每个文件只能匹配一个 loader,被一个 loader 处理,因此可以使用 oneOf 唯一匹配,不需要每个文件把所有的 loader 都询问一遍,可以提高 loader 的执行效率

    const {resolve} = require('path')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    process.env.NODE_ENV = 'production'
    
    //复用loader
    const commonCssLoader = [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader:'postcss-loader',
            options:{
                ident:'postcss',
                plugins:()=>[require('postcss-preset-env')()]
            }
        }
    ]
    
    module.exports={
        entry:'./src/index.js',
        output:{
            filename:'bundle.js',
            path:resolve(__dirname,'build')
        },
        module:{
            rules:[
                {
                    test: /.js$/,
                    exclude: /node_modules/,
                    enforce: 'pre', //优先执行,正常的,一个文件只能被一个loader处理,当一个文件要被多个loader处理,一定要指定loader执行的先后顺序,先执行eslint再执行babel
                    loader: 'eslint-loader',
                    options: {
                        fix: true
                    }
                },
                //以下loader中只会匹配一个,注意不能有两个loader处理同一种类型文件,所以eslint-loader放在oneOf匹配之前执行
                {
                    oneOf:[
                        {
                            test: /.css$/,
                            use: [...commonCssLoader]
                        },
                        {
                            test: /.less$/,
                            use: [...commonCssLoader]
                        },
                        {
                            test: /.js$/,
                            exclude: /node_modules/,
                            loader: 'babel-loader',
                            options: {
                                presets: [
                                    ['@babel/preset-env', {
                                        useBuiltIns: 'usage',
                                        corejs: { version: 3 },
                                        targets: {
                                            chrome: '60',
                                            firefox: '50'
                                        }
                                    }]
                                ]
                            }
                        },
                        {
                            test: /.(jpg|png|gif)$/,
                            loader: 'url-loader',
                            options: {
                                limit: 8 * 1024,
                                name: '[hash:10].[ext]',
                                outputPath: 'imgs',
                                esModule: false
                            }
                        },
                        {
                            test: /.html$/,
                            loader: 'html-loader'
                        },
                        {
                            exclude: /.(js|css|less|html|jpg|png|gif)$/,
                            loader: 'file-loader',
                            options: {
                                outputPath: 'media'
                            }
                        }
                    ]
                }
            ]
        },
        plugins:[
            new MiniCssExtractPlugin({
                filename:'bundle.css'
            }),
            new OptimizeCssAssetsWebpackPlugin(),
            new HtmlWebpackPlugin({
                template:'./src/index.html',
                minify:{
                    collapseWhitespace:true,
                    removeComments:true
                }
            })
        ],
        mode:'production'
    }
    

      

  • 相关阅读:
    Spring-Lesson2
    Spring-Lesson1
    三十九:WEB漏洞-XXE&XML之利用检测绕过全解
    三十八:WEB漏洞-反序列化之PHP&JAVA全解(下)
    三十七:WEB漏洞-反序列化之PHP&JAVA全解(上)
    三十六:WEB漏洞-逻辑越权之验证码与Token接口
    cookie,session,token傻傻分不清
    三十五:WEB漏洞-逻辑漏洞之找回机制及接口安全
    三十四:WEB漏洞之登录脆弱及支付篡改
    三十三:WEB漏洞-逻辑越权之水平垂直越权
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/13052780.html
Copyright © 2020-2023  润新知