vue 优化之图片压缩遇到的坑

vue2.x版本 和 vue4.x版本 关于图片压缩的配置是不同的

vue2.x版本的配置文件(vue.config.js:没有自行创建),如下

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('min-image')
            .test(/\.(png|jpe?g|gif)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时                            候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
            .end()
    }
}

vue4.x版本的配置文件(vue.config.js:没有自行创建),如下

webpackConfig => {
    webpackConfig.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .use('url-loader')
        .loader(require.resolve('url-loader'))
        .options({
            limit: 4096,
            fallback: {
                loader: require.resolve('file-loader'),
                options: {
                    name: `static/img[name].[hash:8].[ext]`
                }
            }
        })
    }

否则会报如下错误:Error: Cannot find module ‘gifsicle’

参考链接:https://www.jianshu.com/p/59a8ebe38255
参考链接:https://blog.csdn.net/qq_27009517/article/details/119248862

百度搜索:vue-cli4 配置 webpack 之用 image-webpack-loader图片压缩处理/优化