Блог

Все еще довольно новичок в webpack. Я выводю js-файл запуска webpack в wwwrootassetsjsDiststart.js Это мой файл webpack

   const path = require('path');
const outputPath = './wwwroot/assets/js/Dist';
const sourcePath = './WhipoverApp';

module.exports = {
    //this will allow webpack to set certain optimisations
    mode:'development',
    devtool:'eval-source-map',
    entry: sourcePath   '/start.ts',
    module:
    {
        rules: [
            {
                //make sure file is a *.ts and apply ts-loader if it is. Only look in src folder.
                test: /.ts$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname, sourcePath)]
            },
            {
                test: /.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.(svg|jpeg|gif|png|jpg)$/, // lightbox2 requires png and gif images to be imported
                // ensure `node_modules` folder is not excluded
                use: {
                    loader: 'file-loader',
                    options: {
                        name: "[name].[ext]",
                        outputPath: "/Images"
                    }
                }
            }                  
        ]
    },
    resolve: {
        //when we import something it will know how to resolve that file
        extensions: ['.ts', '.js']        
    },
    output: {
        //relative path that tells the dev server where to serve the code from
        publicPath: outputPath,
        filename: "start.js",
        //__dirname is a webpack constant that gives you the current webpack js config location.
        path: path.resolve(__dirname, outputPath)
    }
};
  

Я импортировал lightbox2 через NPM и импортирую так в свой файл start.ts..

 import $ from "jquery";
require("bootstrap");//will load all of Bootstrap’s jQuery plugins onto the jQuery object
import AOS from 'aos';
import 'aos/dist/aos.css';
//import 'lightbox2/dist/css/lightbox.min.css';
import { newnav } from './Library/newnav';
import { hoverAnim } from './Library/bs-init';
import { Car } from './Classes/car';
import 'lightbox2/dist/css/lightbox.min.css';
import lightbox from 'lightbox2'

newnav();
AOS.init({ disable: 'mobile' });
hoverAnim();
lightbox;
  

Изображения лайтбоксов выводятся в wwwroot assets js Dist Images без проблем в проекте, и когда он загружается в браузере, эффект работает нормально. Однако изображения лайтбоксов (next prev и т. Д.) Полностью отсутствуют в браузере / сервере, даже если они существуют в проекте.

Это приводит к ошибке браузера wwwroot/assets/js/Dist/Images/prev.png 404 (Не найден)

Однако prev.png физически находится в нужном месте, которое я вижу в структуре папок Visual studio.

Копия изображений, конечно, также находится в node_modules, но, насколько я понимаю, она должна выводиться в мою папку dist. Спасибо