css 和 html 中的 Webpack 错误相对路径

Question

我用谷歌搜索了很多，但没有找到解决我问题的明确方法。

我的 xxx.sass 和 index.html 都将引用图像文件夹中的相同 xxx.png。但是 webpack 解析到错误的相对路径。我用

webpack ^4.41.2,
文件加载器 ^4.2.0 xxx.png
mini-css-extract-plugin ^0.8.0 for xxx.css
html-loader ^0.5.5 for index.html

源代码：

xxx.sass

.banner
    background-image: url(../images/xxx.png)

index.html

<body>
    <h1>Hello World</h1>
    <img src="./images/xxx.png" />
</body>

我的文件夹结构是这样的：

/dist
  /images
     xxx.png
  /css
     xxx.css
  index.js
  index.html

/src
   /css
      xxx.sass
   /images
      xxx.png
   index.js
   index.html

如您所见，index.html 和 xxx.sass 中 xxx.png 的相对路径应该不同。但是在我运行 webpack 之后， index.html 和 xxx.css 具有与 xxx.png 相同的相对路径，例如：

index.html

<body>
   <h1>Hello World</h1>
   <img src="images/google_0877987d.png" />
   <script type="text/javascript" src="index_b88aa84a.js"></script>
</body>

xxx.css

.banner
{
    width:184px;
    height:60px;
    background-image:url(images/google_0877987d.png)
}

我的webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: 'production',
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js',
    },
    module: {
        rules: [
            {
                test: /\.sass$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name]_[contenthash:8].[ext]',
                        context: path.resolve(__dirname, 'src/'),
                        useRelativePaths: true,
                    },
                }],
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        root: path.resolve(__dirname, 'src/'),
                        attrs: ['img:src', 'link:href'],
                    },
                }],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]_[contenthash:8].css',
        }),
    ],
}

Answer 1

终于，我找到了解决办法。添加publicPath选项为MiniCssExtractPlugin.loader解决问题

{
    test: /\.sass$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../',
            },
        },
        'css-loader',
        'sass-loader',
    ],
}

虽然问题已解决，但我对这个解决方案不是 100% 满意，因为如果更改文件夹结构，则需要相应地更新 publicPath。

如果有什么好的方案可以自动根据文件夹结构解析相对路径就更好了

css 和 html 中的 Webpack 错误相对路径

Webpack wrong relative path in css and html

webpack

webpack-4

webpack-file-loader

webpack-html-loader