我有一个 vue 3 应用程序,我最终在其中设置了 webpack 5。正如我所看到的,我现在消除了所有问题,唯一剩下的就是当我在开发模式下运行 webpack 服务脚本时,它不会加载我的 svg-s 和图像。如何配置 webpack,以便它能够从 scr/assets 文件夹中捆绑我的 svg-s?
我的 webpack 配置:
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,也许我只是配置错误。
提前感谢您的帮助!
最佳答案
webpack5中的配置发生了很大变化
{
loader: 'url-loader',
options: {
encoding: false,
},
这不再起作用了。 url-loader 甚至从 npm 包中删除。
当前的方式可以在文档中找到
https://webpack.js.org/guides/asset-management/#loading-images
关于javascript - Webpack 5 不显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69677484/