删除Webpack文件加载器的路径的一部分

Question

我正在设置Webpack 3，目前正在配置要从src文件夹复制到dist文件夹的静态图像的资产管理。在复制到dist文件夹时，我想保留/img文件夹的文件结构，但是我遇到的问题是我试图删除部分路径占位符。我试图实现的目标有可能吗？

我的规则如下：

  {
      test: /\.(png|jpe?g|gif|ico)$/,
      use: [{
          loader: 'file-loader',
          options: {
              name: '[path][name].[ext]?[hash]',
              //outputPath: 'img/'
          }
      }]
  }

它正在通过上下文从我的入口点文件中获取图像：

require.context('./img/', true, /\.(png|jpe?g|gif|ico)$/);

但是，当文件被复制时，因为我将[path]占位符作为名称的一部分，所以文件将类似于/src/img/[name].[extension]?[hash]。我想保留路径的其余部分不变，因为某些图像具有类似/src/img/favicons/[name].[extension]?[hash]的路径，并且我觉得dist文件夹应该保持这种结构。从代码中可以看到，我尝试使用outputPath，但这只是将文件设置为/img/src/img/[name].extension?[hash]。我也尝试过使用publicPath设置，但它似乎根本没有任何作用。最终目标将是使上述2个文件的路径中不包含文件名的/src部分。

Answer 1

上下文选项就是您要寻找的内容：

  {
      test: /\.(png|jpe?g|gif|ico)$/,
      use: [{
          loader: 'file-loader',
          options: {
              name: '[path][name].[ext]?[hash]',
              context: 'src'
          }
      }]
  }

Answer 2

以防万一您没有自己解决这个问题：有一个useRelativePath选项可以保留相对路径。另外，如果您不想在其中使用../之类的东西，则可以在outputPath上使用回调来更改返回的内容。

关于这两件事的文档：

• https://github.com/webpack-contrib/file-loader#userelativepath
• https://github.com/webpack-contrib/file-loader#outputpath

Answer 3

使用webpack 4，您可以输出到自定义目录，在本例中为父文件夹的目录，如下：

  {
    test: /\.(png|jpe?g|gif|ico)$/,
    exclude: [/some-folder/],
    use: {
      loader: "file-loader",
      options: {
        name: `[path][name].[ext]`,
        // Output into parent folder's directory
        outputPath: url => url.slice(url.indexOf(`/`) + 1)
      }
    }
  }

输出路径按此顺序将url, resourcePath, context作为参数。

Answer 4

您可以使用context-选项去除路径的一部分：

...
query: {
  context: path.join(__dirname, 'content'),
...