Webpack，CSS：图片放在哪里？

Question

我真的很难理解在webpack中应该把图片/字体放在哪里才能正确地打包它们，并且如何在我的CSS中使用url()。

我的webpack配置文件如下：

entry: ['./main.js',],
output: {
    path: path.resolve(__dirname, './public/dist'),
    publicPath: '/dist/',
},

它告诉我东西应该在哪里结束，但不知道它们从哪里来。我猜测这是加载器的工作，它们在项目中到处寻找文件并将它们复制到那里。我有一个用于图像的加载器：

{
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
    loader: 'url-loader?limit=10000',
},

我创建了一个目录/public/images，里面包含一个名为test.png的文件。我本来希望它会出现在public/dist/images/或者/public/dist/中，但是并没有出现。

如果最终图片出现在其中一个目录，我该如何在CSS中使用它作为背景？是/public/dist/images/test.png吗？目前我有以下代码：

.mydiv {
    background: url("/public/images/test.png");
}

它似乎没有显示出来。看起来我甚至无法在css-modules中进行require操作。

请你能否为我澄清一下这是如何工作的呢？

编辑：样式加载器：

  {
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: isDebug,
        modules: true,
        localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        camelCase: 'dashes',
      })}`,
      'postcss-loader',
    ],
  },
  {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"],
  },

- JulienD

---

你能展示一下你的样式加载器吗？ - Everettss

我在问题中添加了我的样式加载器。在JS代码中，我成功使用相对路径(require("../../public/images/test.png"))导入了两个图像，并且其中一个在构建时被复制到/public/dist/。但是在CSS中，仍然没有成功。 - JulienD

您需要在文件系统中相对于当前文件的图像，就像使用Javascript一样。更多阅读：http://blog.andrewray.me/webpack-when-to-use-and-why/ - Andy Ray

@JulienD 关于你的图片：如果一个图片小于10K，它将被内联到包中（这就是 limit=10000 的意思）。至于样式：Webpack 只有在你在 JS 中 require 样式时才会起作用（或者如果你有一个特定的 entry 点）。而且没有额外的配置，CSS 将被包含在（JS）包中，而不是保存为单独的 .css 文件。 - robertklep

非常感谢！@robertklep 对于 10K 限制的解释非常有帮助。我原以为它是文件大小的限制。 - JulienD

Answer 1

据我所知，您不需要做任何事情，webpack会为您处理。比如说，您有一个名为images的文件夹，您希望在某个地方使用它。

.mydiv {
    background: url("/public/images/test.png");
}

Webpack会将这个文件打包到dist文件夹中，它还会更改文件名并修改url路径。在我的情况下，我有一个像这样的url

background: url("../../assets/webpack+angular.png")

当我运行webpack时，我得到了一个名为dist/f1305c1f7292179760078b1efdee3ffa.png的文件，并且我的URL看起来像这样。

url(/f1305c1f7292179760078b1efdee3ffa.png);

一切都正常工作。在CSS中不需要使用require。

- Jorawar Singh

---

确实有效。我试图填充的div由于某些晦涩的原因（可能与Material有关）没有显示出来，但另一个div却可以。谢谢。您简短的几行代码和对我的帖子的评论应该在他们难以理解的文档之上。 - JulienD