• 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'
    }
    

      

  • 相关阅读:
    Centos7 下 PHP 添加缺少的组件 sockets 和 openssl
    vue使用 video.js动态切换视频源视频源不刷新问题
    vue+js清除定时器
    获取ip地址,并根据ip获取当前省份
    html页面引用video.js播放m3u8格式视频
    uniapp每隔几秒执行一下网络请求(h5端亲测可以,其他端未测试)
    关于uniapp获取当前距离屏幕顶部的距离
    按值传递与按值引用详解(java版)
    JavaScript的深入理解(1)
    vue-cli3配置webpack-bundle-analyzer插件
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/13052780.html
Copyright © 2020-2023  润新知