为 Webpack 解析 CSS 文件中的背景图像 URL

Question

我知道这可能经常被问到，但我已经看过几个类似的问题，但不太清楚如何在这种情况下解析 URL。

注意：我没有使用开发服务器或任何特殊框架；只是 Webpack 和通过浏览器打开文件 (file://)。 Webpack 构建的文件必须在没有服务器的情况下工作，所以请不要建议使用服务器。另外，我正在使用 Webpack 3.

文件结构：

src/
- assets/
  - img/
    - backgrounds/
      - some-bg.jpg
  - css/
    - layouts.css
- index.html
- main.js
node_modules/
webpack.conf.js

layouts.css 引用一些-bg.jpg 作为背景图片：

body {
    background-image: url('../img/backgrounds/some-bg.jpg');
}

在我的 Webpack 配置中，我有：

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },
     module: {
         loaders: [
           {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: "css-loader",
                    fallback: "style-loader"
                })
           },
           {
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: "./assets/img/[name].[ext]"
                    }
                }
           }
        ]
    }
    plugins: [
        new ExtractTextPlugin({
            filename: "./assets/css/style.css"
        }),
    ]
// ...
}

index.html 中引用的所有图像均已正确更改为 ./assets/img/whatever.png。

然而，背景图像 url 更改为 url(./assets/img/some-bg.jpg)，指向路径 dist/assets/css/assets/img/some-bg.jpg。

我必须更改什么才能使 url 简单地成为 dist/assets/img/some-bg.jpg？

Answer 1

终于成功了。有了这个特定的结构，我必须在 ExtractTextPlugin 上指定一个 publicPath（即使我没有为 Webpack 本身设置一个常规的 publicPath）。

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    use: "css-loader",
    fallback: "style-loader",
    publicPath: "../../"
  })
},

为 Webpack 解析 CSS 文件中的背景图像 URL

Resolving background-image URLs in CSS files for Webpack

webpack

css-loader

webpack-2