vue-cli3中如何配置image-webpack-loader?

以前是在 webpack.base.config.js 中配置 image-webpack-loader :

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

现在使用 vue-cli3 没有地方配置,官网上在 vue-config.js 中配置,但是应该如何配置呢?有没有使用过的?

回答:

楼主,你好~
试试下面这个,亲测可以。最后可以用命令 vue-cli-service inspect 验证下

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    }
}

评论里截不了图,就还在这里说吧。

先说第二个问题吧,具体命令去官网上看下,是最为权威的。传送门
下面是我本地测试的截图

clipboard.png

第一个问题的化,可以看到并没有对最终 img 输出的路径做处理,你看看是否有其他修改


如有帮助,麻烦点击下采纳,谢谢~

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注