После webpack-компиляции браузер ищет изображения из css-файла в неправильном каталоге - PullRequest
0 голосов
/ 07 октября 2019

Я использую веб-пакет внутри темы WordPress. Место размещения webpack.config.js :

wp-content/themes/app/webpack.config.js

Содержимое файла webpack.config.js:

const WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {

    entry: './index.js',

    output: {
        filename: 'main.js',
        path: __dirname + '/dist'
    },

    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(gif|svg|jpe?g|png)$/,
                loader: "file-loader",
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
        ],
    },

    plugins: [
        new WebpackNotifierPlugin({
            title: 'Webpack',
            alwaysNotify: true
        }),
    ]
};

ТакжеЯ использую плагин lightbox2. Он устанавливается в папку с темой:

npm install lightbox2 --save

В сценарии запуска index.js я написал:

require('lightbox2/dist/js/lightbox.min');
require('lightbox2/dist/css/lightbox.min.css');

А затем, после запуска команды в папке темы:

webpack -w ./index.js --devtool source-map

Webpack помещает изображения из css-файла lightbox2 в путь вывода https://i.imgur.com/ahxIye8.png

И это хорошо:)

Но браузер ищет эти изображения в папке текущегостраница https://i.imgur.com/HJR2xnY.png Пока изображения находятся в другой папке https://i.imgur.com/L1g9FSP.png

Подскажите, пожалуйста, как мне это исправить?

...