file-loader 设置[path] 会多一层路径

Question

config

output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'js/[name].js'
}

----------

test: /\.(png|jpg|jpeg|gif)$/,
use: [{
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]',
        publicPath: './',
        outputPath: 'images/'
    }
}]

---

目录

src
--images
----icon
------xxx.png

⬇︎

dist
--src
----images
------icon
--------xxx.png

---

[path]是基于什么的？

Answer 1

file-loader里的path以你webpack的output的publicPath为基准

--编辑更新--
@ZivGit[ZivGit]
我自己这边用的url-loader，其实它也是基于file-loader，你可以参考下，我这边目录结构是

--src
  --img
    --xxx.png

loader配置

      {
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]',
              publicPath: './',
              outputPath: 'img/',
              limit: 10000,
            },
          },
        ],
      }

output配置

  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/",
    filename: "bundle.js"
  },

最终输出到

--build
  --img
    --xxx.png