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

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')，而 file-loader 将复制从 'src/assets' 开始的相对路径，结果将是：

project/
├── src/
│   └── assets/
│       └── images/
│           └── user.png
└── build/
    └── images/
        └── user.png