webpack-对loader加载的优化之oneOf

优化前各个loader的配置

        rules: [
            // 在rules中写详细的loader配置
            // 打包css资源
            {
                // 正则表达式,匹配那些文件，匹配以.css结尾的文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [...commonCssLoader]
            },
            // 不同的文件必须配置不同的loader处理，所以less和css文件的处理不能放在一起
            //加载less文件
            {
                test: /\.less$/,
                use: [...commonCssLoader, 'less-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                // 要使用多个loader用use数组，只使用一个loader可以直接用loader
                loader: 'url-loader',
                options: {
                    // webpack在打包图片时，它不是原封不动的输出。
                    // 当发现图片大小小于8kb（8*1024就是8kb），就会被base64处理
                    // base64处理：就是会将图片转换成base64编码的方式变成一种base64编码的字符串
                    // 浏览器在解析时就会将这个字符串当做图片去解析
                    // base64的优点：能够减少请求数量（可以减轻服务器压力）
                    // base64的缺点：图片体积会变大（导致文件请求变慢）
                    // 综合考虑base64的优缺点，我们只会对小图片进行处理，而不会对大图标进行处理。
                    // 这个大小可以根据项目来设置
                    limit: 8 * 1024,
                    // 解释：[hash:10]表示取hash值的前10位；[ext]表示取文件原来的扩展名
                    name: '[hash:10].[ext]',
                    // 输出到img的话，直接设置output为img即可，这样在输出是就会输出到path: resolve(__dirname, 'build')中的build文件夹下的img文件夹中
                    outputPath: 'img',
                    esModule: false
                },
                // 因为webpack5对url-loader已经弃用，如果想继续使用需要添加type: 'javascript/auto'
                type: 'javascript/auto'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            // 打包其他资源(除了html，js,css，less等资源以外的资源)
            {
                // 使用exclude排除html，js,css，less等资源
                exclude: /\.(css|html|js|less|png|jpg|gif)$/,
                loader: 'file-loader'
            }
        ]

所有的loader配置都放在rules中，在加载的时候每加载一种资源就会将所有的loader配置匹配一遍，性能不是很友好，可以使用oneOf属性来进行优化，每次加载一种资源时只去匹配一个loader。

使用oneOf的配置

        rules: [
            // 在rules中写详细的loader配置
            {
                oneOf: [
                    // 打包css资源
                    {
                        // 正则表达式,匹配那些文件，匹配以.css结尾的文件
                        test: /\.css$/,
                        // 使用哪些loader进行处理
                        use: [...commonCssLoader]
                    },
                    // 不同的文件必须配置不同的loader处理，所以less和css文件的处理不能放在一起
                    //加载less文件
                    {
                        test: /\.less$/,
                        use: [...commonCssLoader, 'less-loader'
                        ]
                    },
                    {
                        test: /\.(png|jpg|gif)$/,
                        // 要使用多个loader用use数组，只使用一个loader可以直接用loader
                        loader: 'url-loader',
                        options: {
                            // webpack在打包图片时，它不是原封不动的输出。
                            // 当发现图片大小小于8kb（8*1024就是8kb），就会被base64处理
                            // base64处理：就是会将图片转换成base64编码的方式变成一种base64编码的字符串
                            // 浏览器在解析时就会将这个字符串当做图片去解析
                            // base64的优点：能够减少请求数量（可以减轻服务器压力）
                            // base64的缺点：图片体积会变大（导致文件请求变慢）
                            // 综合考虑base64的优缺点，我们只会对小图片进行处理，而不会对大图标进行处理。
                            // 这个大小可以根据项目来设置
                            limit: 8 * 1024,
                            // 解释：[hash:10]表示取hash值的前10位；[ext]表示取文件原来的扩展名
                            name: '[hash:10].[ext]',
                            // 输出到img的话，直接设置output为img即可，这样在输出是就会输出到path: resolve(__dirname, 'build')中的build文件夹下的img文件夹中
                            outputPath: 'img',
                            esModule: false
                        },
                        // 因为webpack5对url-loader已经弃用，如果想继续使用需要添加type: 'javascript/auto'
                        type: 'javascript/auto'
                    },
                    {
                        test: /\.html$/,
                        loader: 'html-loader'
                    },
                    // 打包其他资源(除了html，js,css，less等资源以外的资源)
                    {
                        // 使用exclude排除html，js,css，less等资源
                        exclude: /\.(css|html|js|less|png|jpg|gif)$/,
                        loader: 'file-loader'
                    }
                ]
            }
        ]

注意

oneOf这种情况只适合一种资源类型的文件只匹配一种loader的，如果有一个文件需要多个不同的loader处理，就需要将其他的loader放在oneOf外面。

在执行时oneOf中的loader只会匹配一个，不能有两个配置处理同一种类型的文件。如果有两个配置处理同一类型的文件，就需要将先执行的那个loader放在oneOf外面。

例如js文件需要eslint-loader进行语法检查，又需要babel-loader进行兼容性处理，此时就可以将eslint-loader的配置放在rules里面，oneOf外面，将babel-loader的设置放在oneOf中