javascript - 如何通过 webpack 从 node_modules 解析图像

Question

我将 Laravel 与 Intertia 和 Vue 一起使用。我安装了灯箱npm install lightbox2 --save。

这就是我的webpack.config.js样子：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

resources/js/app.js看起来像这样：

require('./bootstrap');
require('lightbox2/dist/js/lightbox');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .mixin(require('./translation'))
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

resources/css/app.css看起来像这样：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'intlTelInput.min.css';
@import 'toastr.min.css';
@import 'lightbox2/dist/css/lightbox.min.css';

.logo {
    max-height: 50px;
}

但是当我尝试运行 npm run dev 我得到这个错误：

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/loading.gif' in 'C:\xampp\htdocs\site\resources\css'

该图像位于node_modules/lightbox2/dist/images

标签： javascriptlaravelvue.jswebpack