删除 webpack 文件加载器的部分路径答案

【问题标题】：Remove part of path for webpack file loader删除 webpack 文件加载器的部分路径
【发布时间】：2018-06-03 01:20:12
【问题描述】：

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

我的规则如下：

  {
      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 部分。

【问题讨论】：

标签： webpack webpack-file-loader

【解决方案1】：

上下文选项是您正在寻找的，在您的情况下：

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

【讨论】：

不错的一个 :) thnx
也为我工作，这是我 3 多天以来想要的解决方案。 :)

【解决方案2】：

以防万一你自己没有解决这个问题：有一个useRelativePath 选项允许保留相对路径。此外，如果您不希望其中包含 ../ 之类的内容，您可以在 outputPath 上使用回调来更改它返回的内容。

关于这两件事的文档：

【讨论】：

【解决方案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 作为参数。

【讨论】：

这种工作，但路径的实际使用没有更新，它们都指向旧路径。然而，文件存储在 outputPath 函数指定的正确位置。

【解决方案4】：

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

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

【讨论】：