Question

我真的很难理解我应该将图像/字体放在哪里使用webpack，以便它们正确捆绑，以及如何在url()的CSS中使用它们。

我的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"],
  },

Answer 1

我知道你不需要做任何事情，webpack会为你照顾它。假设你有一个文件夹调用图像在某些地方，你想要这个

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

webpack会在你的dist文件夹中捆绑它，它也会用其他内容更改它的名称甚至是url中的路径。在我的情况下，我有像这样的网址

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

当我运行webpack时，我得到一个名为dist/f1305c1f7292179760078b1efdee3ffa.png的文件我的网址看起来像这样

url(/f1305c1f7292179760078b1efdee3ffa.png);

一切正常。你不需要在css中使用require。

Webpack，CSS：放置图像的位置？

1 个答案: