[SOLVED] Webpack wrong relative path in css and html

Webpack wrong relative path in css and html

I have googled a lot, but I didn't find a clear solution to my question.

Both my xxx.sass and index.html will reference the same xxx.png from images folder. But the webpack resolved to the wrong relative path. I use

webpack ^4.41.2,
file-loader ^4.2.0 for xxx.png
mini-css-extract-plugin ^0.8.0 for xxx.css
html-loader ^0.5.5 for index.html

The source code:

xxx.sass

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

index.html

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

My folder structure like this:

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

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

As you can see the relative path to xxx.png in index.html and xxx.sass should be different. But after I run webpack, the index.html and xxx.css have the same relative path to xxx.png, like:

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)
}

My 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',
        }),
    ],
}

Solution

Finally, I found the solution. Add the publicPath option for the MiniCssExtractPlugin.loader solve the problem.

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

Although the problem is solved, I'm not 100% satisfied with this solution as the publicPath need to be updated accordingly if the folder structor is changed.

It will be better if there's some nice solution to resolve the relative path according to the folder structure automatically.