Я много гуглил, но не нашел четкого решения моего вопроса.
И мои xxx.sass, и index.html будут ссылаться на один и тот же xxx.png из папки images. Но веб-пакет принял неверный относительный путь. Я использую
- webpack ^ 4.41.2,
- файл-загрузчик ^ 4.2.0 для xxx.png
- mini-css-extract-plugin ^ 0.8. 0 для xxx.css
- html-загрузчик ^ 0.5.5 для 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
Как вы можете видеть относительный путь к xxx.png в index.html и xxx.sass долженбудь другим. Но после того, как я запустил 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',
}),
],
}