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

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 文档！）我发现有一种方法可以控制文件加载器的输出并复制 source 目录的文件结构在 output 目录中。这是 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

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

Unexpected [path] in file-loader

webpack

webpack-file-loader