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