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

Question

以前是在 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 中配置，但是应该如何配置呢？有没有使用过的？

Answer 1

楼主，你好~
试试下面这个，亲测可以。最后可以用命令 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()
    }
}

---

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

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

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

---

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