2023年6月21日发(作者：)
vue-cli4⽤image-webpack-loader配置webpack图⽚压缩处理优化vue-cli4已经默认帮我们做了很多优化处理，包括静态资源输出、样式处理、代码分割等等。我们需要⾃⼰⼿动配置的事情更少了，⽽图⽚压缩处理就是其中的⼀件。推荐这个插件，GitHub地址：image-webpack-loader安装：npm i image-webpack-loader -D很多⼈直接这样在⾥⾯加
image-webpack-loader 配置：chainWebpack: config => { .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: true }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false } // webp: { quality: 75 } })}但image-webpack-loader的GitHub⽂档已经明确告诉我们：In your
, add the image-loader, chained after the file-loader.即：添加 image-loader 的时候，必须要链式地跟在 file-loader 后⾯。其实是先执⾏image-webpack-loader，然后再交由file-loader去处理。这很好理解，当然是先压缩后再复制输出到打包的静态资源⽬录去啦。关于 loader 处理顺序可参考 webpack loader 执⾏顺序// 官⽅⽰例rules: [{ test: /.(gif|png|jpe?g|svg)$/i, use: [ 'file-loader', { loader: 'image-webpack-loader', options: { bypassOnDebug: true, // webpack@1.x disable: true, // webpack@2.x and newer }, }, ]}]然鹅，在 vue-cli4 中 file-loader 的部分已经帮我们像这样配置过了：webpackConfig => { .rule('images') .test(/.(png|jpe?g|gif|webp)(?.*)?$/) .use('url-loader') .loader(e('url-loader')) .options({ limit: 4096, fallback: { loader: e('file-loader'), options: { name: `static/img[name].[hash:8].[ext]` } } })那我们可以像如下配置：image-webpack-loader 要先执⾏所以要配置在下⾯，实测按照 webpack-chain ⽂档配置 enforce 没有什么卵⽤(我还故意把顺序弄错)，结果都会正常压缩图⽚，感觉还是⽼⽼实实根据需要的先后顺序从下到上配置好了
2023年6月21日发(作者：)
vue-cli4⽤image-webpack-loader配置webpack图⽚压缩处理优化vue-cli4已经默认帮我们做了很多优化处理，包括静态资源输出、样式处理、代码分割等等。我们需要⾃⼰⼿动配置的事情更少了，⽽图⽚压缩处理就是其中的⼀件。推荐这个插件，GitHub地址：image-webpack-loader安装：npm i image-webpack-loader -D很多⼈直接这样在⾥⾯加
image-webpack-loader 配置：chainWebpack: config => { .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: true }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false } // webp: { quality: 75 } })}但image-webpack-loader的GitHub⽂档已经明确告诉我们：In your
, add the image-loader, chained after the file-loader.即：添加 image-loader 的时候，必须要链式地跟在 file-loader 后⾯。其实是先执⾏image-webpack-loader，然后再交由file-loader去处理。这很好理解，当然是先压缩后再复制输出到打包的静态资源⽬录去啦。关于 loader 处理顺序可参考 webpack loader 执⾏顺序// 官⽅⽰例rules: [{ test: /.(gif|png|jpe?g|svg)$/i, use: [ 'file-loader', { loader: 'image-webpack-loader', options: { bypassOnDebug: true, // webpack@1.x disable: true, // webpack@2.x and newer }, }, ]}]然鹅，在 vue-cli4 中 file-loader 的部分已经帮我们像这样配置过了：webpackConfig => { .rule('images') .test(/.(png|jpe?g|gif|webp)(?.*)?$/) .use('url-loader') .loader(e('url-loader')) .options({ limit: 4096, fallback: { loader: e('file-loader'), options: { name: `static/img[name].[hash:8].[ext]` } } })那我们可以像如下配置：image-webpack-loader 要先执⾏所以要配置在下⾯，实测按照 webpack-chain ⽂档配置 enforce 没有什么卵⽤(我还故意把顺序弄错)，结果都会正常压缩图⽚，感觉还是⽼⽼实实根据需要的先后顺序从下到上配置好了
发布评论