vuecli项目打包时压缩图片image-webpack-cli

最新推荐文章于 2023-05-19 09:57:49 发布

一叶知秋9307

最新推荐文章于 2023-05-19 09:57:49 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40285497/article/details/109485228

本文介绍如何解决image-webpack-loader安装及配置问题。首先需修改hosts文件避免域名污染，然后使用npm安装依赖并配置vue.config.js来启用loader。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 安装

安装前最好往hosts文件添加一条记录：199.232.68.133 raw.githubusercontent.com。
因为GitHub的raw.githubusercontent.com域名解析可能因某些原因给临时污染了导致你下载image-webpack-loader失败（我就失败了好多回）。
上面的IP你可以通过查询真实IP，输入raw.githubusercontent.com查找获取。

npm install --save-dev image-webpack-loader

2 vue.config.js配置

module.exports = {
    // 。。。 这里省略其它配置
    chainWebpack: config => {
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },
}