文件加载器中出现意外的[path]

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 而不是 / 呢？

- Daniel Birowsky Popeski

---

你解决了这个问题吗？ - pilau

@pilau 不好意思，我不记得了。 - Daniel Birowsky Popeski

谢谢。我想，终于，在两天之后，我弄清楚了：file-loader的context选项负责加载程序如何构建相对路径。这意味着：context = 在src目录中复制相对路径以在生成的构建目录中使用的根文件夹。 - pilau

@pilau 你说得完全正确。我也做了同样的事情。把它放在答案中，这样可以帮助其他人 :} - Daniel Birowsky Popeski

我一定会的，但要等到下周二，那时我才从我急需的长假回来！ :) - pilau

@pilau 疯了 :} - Daniel Birowsky Popeski

Answer 1

经过两天的尝试和错误（感谢Webpack文档！），我发现有一种方法可以控制file-loader的输出并在output目录中复制source目录的文件结构。这就是Webpack设置中的context，它可以作为每个加载器以及每个构建使用。

以下是file-loader的示例：

  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]'
    },
  },

这是因为你想在build文件夹中复制src文件夹下的文件结构。

如果你想从路径中移除assets目录，那么context的值应该是：path.resolve(__dirname, 'src/assets')，此时file-loader将会以相对路径开始于'src/assets'的方式进行复制，结果如下：

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

- pilau

---

非常感谢你。你帮我节省了几天时间，让我不用再试图修复我的 SCSS 中的这些 URL。 - kirill.buga

@kirill.buga 当然。我花了一些时间才弄清楚这个问题... 我知道那种沮丧感。 - pilau