Webpack 网页包，CSS：图片放在哪里？_Webpack

Webpack 网页包，CSS：图片放在哪里？

webpack

Webpack 网页包，CSS：图片放在哪里？,webpack,Webpack,我真的很难理解我应该把图像/字体放在哪里与webpack一起使用，这样它们才能正确地捆绑在一起，以及如何在我的CSS中使用url（）我的网页配置说 entry: ['./main.js',], output: { path: path.resolve(__dirname, './public/dist'), publicPath: '/dist/', }, 它告诉我事情应该在哪里结束，而不是从哪里来。我猜是加载程序的工作，在项目中的任何地方找到文件并将其复制到那里。我有一个图

我真的很难理解我应该把图像/字体放在哪里与webpack一起使用，这样它们才能正确地捆绑在一起，以及如何在我的CSS中使用

url（）

我的网页配置说

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模块中也不能

要求
你能帮我澄清一下这是怎么回事吗
编辑：样式加载程序：
  {
    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"],
  },

据我所知，您不需要做任何事情，webpack将为您处理。假设你有一个文件夹调用图像的一些地方，你想要这个
.mydiv {
    background: url("/public/images/test.png");
}

webpack将把它捆绑在您的dist文件夹中，它还将使用其他内容更改它的名称，甚至更改url中的路径。在我的例子中，我有这样的url
background: url("../../assets/webpack+angular.png")

url(/f1305c1f7292179760078b1efdee3ffa.png);

当我运行webpack时，我得到了一个名为dist/f1305c1f7292179760078b1efdee3ffa.png的文件
我的url是这样的
background: url("../../assets/webpack+angular.png")

url(/f1305c1f7292179760078b1efdee3ffa.png);

一切都很好。你不需要在css中使用require。
你能给我们看看你的样式加载器吗？我在问题中添加了我的样式加载器。在JS代码中，我使用相对路径（require（“../../public/images/test.png”）
）导入了两个图像，其中一个图像在构建时复制到了/public/dist/
。但是在CSS中，仍然没有成功。您需要与文件系统上当前文件相关的图像，就像Javascript一样。进一步阅读@JulienD关于您的图像：如果一个图像小于10K，它将被内联到包中（这就是limit=10000
的意思）。至于样式：Webpack仅在您的JS中需要您的样式时才起作用（或者如果您有一个特定的条目点）。如果没有额外的配置，CSS将包含在（JS）包中，而不会保存到单独的.CSS文件中。非常感谢@罗伯特克莱普关于10公里极限的解释非常有用。我认为这是对文件大小的限制，确实有效。我试图填充的div由于一些模糊的原因没有显示出来（可能与材料有关），但另一个显示了。谢谢你的几句简单的话和对我帖子的评论应该放在他们不可读的文档上面。