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

Question

我正在设置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包含在此路径中的文件名部分.

Answer 1

在您的情况下,您正在寻找上下文选项:

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