Webpack 5不显示图像

Question

我有一个vue 3应用程序，我最终设置了webpack 5。正如我所看到的，我现在消除了所有的问题，唯一剩下的是，当我在开发模式下运行webpack服务脚本时，它没有加载我的svg和图像。我如何配置webpack，以便它从scr/assets文件夹中捆绑我的svg ?

my webpack config:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const env = process.env.NODE_ENV || 'development';
const mode = process.env.VUE_APP_MODE || 'not-fullstack';
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
alias: {
vue: '@vue/runtime-dom',
'@': path.join(__dirname, 'src'),
},
fallback: { crypto: false, stream: false },
},
module: {
rules: [
{
test: /.vue$/,
use: [
{
loader: 'vue-loader',
},
],
},
{
test: /.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[hash].[ext]',
},
type: 'asset/resource',
},
{
test: /.svg$/i,
use: [
{
loader: 'url-loader',
options: {
encoding: false,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, './public/index.html'),
}),
new VueLoaderPlugin(),
new CopyPlugin([
{ noErrorOnMissing: true, from: './src/assets', to: 'images' },
]),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env),
'process.env.VUE_APP_MODE': JSON.stringify(mode),
}),
],
devServer: {
historyApiFallback: true,
compress: true,
port: 3000,
},
};

我在我的Vue组件中引用我的svg-s，像这样:

<img src="../../assets/logo.svg" alt="logo" />

正如你所看到的，我尝试了copy-webpack-plugin，也许我只是配置错了。

提前感谢您的帮助!

Answer 1

webpack5中的配置改变了很多

{
loader: 'url-loader',
options: {
encoding: false,
},

这个不再工作了。url加载器甚至被从npm包中移除。

当前方法在文档

中找到https://webpack.js.org/guides/asset-management/加载图像

Answer 2

我用webpack cli替换了原来的自动生成文件

{
test: /.(jpe?g|png|gif|svg)$/i,
type: "asset", // or "asset/resource"
},

{
test: /.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
},

然后解决了我的问题。根据我的理论，"资产/资源"类型被打破了，因为当我从"资产/资源"类型切换到文件加载器时，一切都开始工作，没有任何问题。我还尝试调试和打印控制台中未定义的图像对象。

Webpack 5.75.0