Question

我知道这可能会经常被问到，但我看了几个类似的问题，但是在这种情况下无法弄清楚如何解析URL。

注意：我 NOT 使用开发服务器或任何特殊框架;只需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引用some-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(./assets/img/some-bg.jpg)，其指向路径dist/assets/css/assets/img/some-bg.jpg。

我需要更改什么才能将网址简单地设为dist/assets/img/some-bg.jpg？

Answer 1

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

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

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

1 个答案: