如何解决Webpack 5 如何在 HTML 文件中显示图像
我将 webpack
用于一个小型应用程序,到目前为止它运行良好,只是我在显示图像时遇到问题 - 我收到 404。
这里是我的 webpack 配置:
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
index: './src/index.js'
},output: {
path: path.resolve(__dirname,'dist'),filename: '[name].js'
},module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,use: [
MiniCssExtractPlugin.loader,{ loader: 'css-loader',options: { importLoaders: 2,sourceMap: true } },{ loader: 'postcss-loader',options: { sourceMap: true } },{ loader: 'sass-loader',options: { implementation: require('sass'),]
},{
test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,use: [
{
loader: 'file-loader',options: {
name: '[name].[ext]',outputPath: 'src/assets/images'
}
},],},{
test: /\.js$/i,use: {
loader: 'babel-loader',options: {
presets: ['@babel/preset-env'],{
// Extract any CSS content and minimize
test: /\.css$/,use: [
MiniCssExtractPlugin.loader,options: { importLoaders: 1 } },{ loader: 'postcss-loader' }
]
}
]
},plugins: [
new HtmlWebpackPlugin({
template: './dist/index.html',inject: 'body',chunks: ['index'],filename: 'index.html'
}),new MiniCssExtractPlugin({
filename: 'src/css/[name].min.css'
}),devServer: {
watchContentBase: true,contentBase: path.resolve(__dirname,open: true
}
};
然后在我的 index.html 中,我尝试这样做:
<img class="object-cover z-0 w-full h-full" src='/src/assets/images/top_image.png'>
但就像我之前提到的,我得到 404...
有人可以帮我吗?
解决方法
您需要更改旧资源加载器...对于图像,建议使用 RateReplyDetails
。
使用 terserOptions: {
compress: {
module: false
}
}
代替 asset/resource
。
类似:
编辑您的规则:
asset/resource
并在您的 file-loader
中添加:
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,type: 'asset/resource'
}
上查看更多详细信息版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。