1

Всем привет. Суть проблемы есть в названии, опишу ситуацию подробнее. Начну с описания билда, который у меня работает. Вот такая структура папок в дев-режиме:

src>css
src>images
src>pages>about/index.html
src>pages>index/index.html

В html-файлах изображения подключаются следующим образом:

<img src=<%=require("../../images/avatar.png")%>

После сборки я получаю в папке dist:

about.html
index.html
src>images

И все работает прекрасно, но есть одно но.

Суть вопроса вот в чем. Я хотел чтобы после сборки билда index.html оставался наверху, а about.html попадал в папку about. То есть:

index.html
about/index.html
src>images

Настроить сборку не проблема, всего лишь поменять пути и названия в "new HtmlWebpackPlugin" кроме одного: при такой сборке в папке about абсолютно не грузятся изображения, что бы я ни делал, как бы ни прописывал пути, в index.html изображения есть, а в about/index.html изображений нет, они не грузятся. Почему-то им прописывается адрес about/src/images.

Просьба подсказать что я делаю не так. Вот мой webpack.config:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// подключаем плагин
const isDev = process.env.NODE_ENV === 'development';
// создаем переменную для development-сборки
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const webpack = require('webpack');


module.exports = {
    entry: {
        index: './src/js/index.js',
        saved: './src/js/saved.js',
        about: './src/js/about.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'src/js/[name].[chunkhash].js'
    },
    module: {
        rules: [{ // тут описываются правила
            test: /\.js$/, // регулярное выражение, которое ищет все js файлы
            use: { loader: "babel-loader" }, // весь JS обрабатывается пакетом babel-loader
            exclude: /node_modules/ // исключает папку node_modules
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // you can specify a publicPath here
                        // by default it uses publicPath in webpackOptions.output
                        publicPath: '../../',
                        hmr: process.env.NODE_ENV === 'development',
                    },
                },
                'css-loader',
            ],
        },
        {
            test: /\.(png|jpg|gif|ico|svg)$/,
            use: [
                'file-loader?name=./src/images/[name].[ext]',
                {
                    loader: 'image-webpack-loader',
                    options: {
                        mozjpeg: {
                            progressive: true,
                            quality: 65
                        },
                        optipng: {
                            enabled: false,
                        },
                        pngquant: {
                            quality: [0.65, 0.90],
                            speed: 4
                        },
                        bypassOnDebug: true,
                        disable: true,
                    }
                },
            ]
        },
        {
            test: /\.(eot|ttf|woff|woff2)$/,
            loader: 'file-loader?name=./src/vendor/fonts/[name].[ext]'
        }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'src/css/[name].[contenthash].css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/gi,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default'],
            },
            canPrint: true
        }),
        new HtmlWebpackPlugin({
            inject: false, // стили НЕ нужно прописывать внутри тегов
            hash: true, // для страницы нужно считать хеш
            template: './src/pages/index/index.html', // откуда брать образец для сравнения с текущим видом проекта
            filename: 'index.html' // имя выходного файла, то есть того, что окажется в папке dist после сборки
        }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/pages/saved/index.html',
            filename: 'saved.html'
        }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/pages/about/index.html',
            filename: 'about.html'
        }),
        new WebpackMd5Hash(),
        new webpack.DefinePlugin({
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]
};
1

1 ответ 1

0
src="../<%=require("путь")%>"

Несколько часов гугления не выдали мне ни намека что так можно было... Оставлю, может кому пригодится.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.