文件加载器中的意外[路径]

Question

对于我的图片位置： /src/assets/bitmap/sample.jpg

给出的是关键配置：

context: resolve('src')

output: {
  path: resolve('builds/web'),
  publicPath: '',
  filename: ifProd('[name].[chunkHash].js', '[name].js')
},

...

loaders: [
  {
    test: /\.(png|jpg|jpeg)/,
    loader: 'file-loader?name=[path][name].[ext]?[hash]'
  }
]

我期望图像的输出结构如下所示：

/builds/web/assets/bitmap/sample.jpg

相反，我得到这个：

/builds/web/src/assets/bitmap/sample.jpg

我如何告诉文件加载器输出路径必须相对/src而不是相对/？

Answer 1

经过2天的反复试验（感谢Webpack文档！），我发现有一种方法可以控制文件加载器的输出并在输出目录中复制源目录的文件结构。这是Webpack设置，可用于每个加载器以及每个构建。context

这是文件加载器的示例：

  use: [{
    loader: 'file-loader',
    options: {
      context: <path>, // The directory to draw relative paths from
      name: '[path][name].[ext]'
    },
  },

让我们更深入地研究其工作原理。

假设我们正在尝试通过加载图片www.website.com/assets/images/user.png，而我们项目的文件结构为：

project/
??? src/
?   ??? assets/
?       ??? images/
?           ??? user.png
??? build/

理想的结果将是：

project/
??? src/
?   ??? assets/
?       ??? images/
?           ??? user.png
??? build/
    ??? assets/
        ??? images/
            ??? user.png

其配置为：

  use: [{
    loader: 'file-loader',
    options: {
      context: path.resolve(__dirname, 'src')
      name: '[path][name].[ext]'
    },
  },

那是因为您要复制文件src夹内build文件夹下的文件结构。

如果assets要从路径中删除目录，则其值为context：path.resolve(__dirname, 'src/assets')，并且文件加载器将复制以“ src / assets”开头的相对路径，结果为：

project/
??? src/
?   ??? assets/
?       ??? images/
?           ??? user.png
??? build/
    ??? images/
        ??? user.png