|--src---img-a.png
|-scss-b.scss
|-index.html
在 b.scss 中
#b {
backgroun-image: url( ../img/a.png )
}
在 index.html 中
配置 webpack
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve( __dirname, 'dist' ),
filename: '[name].bundle.js',
publicPath: './',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"],
},
{
test: /\.png$/,
use: [
{ loader: 'file-loader', options: {
name: 'img/[name].[ext]',
} }
]
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/html/index.html',
} ),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css"
}),
],
};
发现 html 打包出来的 img 路径是 ./img/a.png 能被成功访问，但是 提取出来的 css 访问的路径也是 ./img/a.png 也就不能访问图片了
请问应该如何修改同时让 index.html 以及 css 能被正常访问同一个图片
