Как правильно указать путь для publicPath для webpack-dev-server

Question

Есть такая сборка...

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


const webpackConf = {
    entry: './frontend/app/app.js',
    output: {
        path: path.resolve(__dirname, './production'),
        filename: 'bundle.js',
        publicPath: 'production/'
    },
    devServer: {
        port: 80,
        overlay: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './index.html', // Комментарий №1 
            template: './frontend/main_pages/tamplate_en.html',
            title: "Index"
        }),
        new CleanWebpackPlugin()
    ]
};


module.exports = () => {
    return webpackConf;
};

Тут все работает, но как только я меняю путь для создания index.html (Смотреть Комментарий №1 выше в коде), publicPath: 'production/' не видит index.html

Что только не пробовал

publicPath: 'production/main-pages/'

publicPath: 'main-pages/'

Вот что получаю...

Единственное, что придумал, так это менять путь для создания index.html

При production задать один путь а при development другой...

Верное ли будет такое решение или есть какой-нибудь путь проще решить данную проблему?

Дополнения...

В эту папку собирается сборка production

path: path.resolve(__dirname, './production'),

Если у меня плагин

new HtmlWebpackPlugin создает index.html в корне папки production, то все работает, а мне надо что бы new HtmlWebpackPlugin создавал index.html папки production/main-pages/

Так вот, когда index.html не в корне папки production, а в папке production/main-pages/ devServer не видит index.html, не срабатывает `publicPath: 'production/'

Answer 1

Чтобы devServer понимал где находиться главный index.html

publicPath: '/' должен указывать корень проекта

в devServer: надо добавить

contentBase: path.join(__dirname, 'production') который указывает на папку сборки

openPage: 'main-pages/en/index.html' который явно указывает какой файл запускать

openPage: можно указать массив нескольких фалов

openPage: ['main-pages/en/index.html', 'main-pages/ru/index.html', 'main-pages/ge/index.html']

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');


const webpackConf = {
    entry: './frontend/app/app.js',
    output: {
        path: path.resolve(__dirname, './production'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        port: 80,
        overlay: true,
        contentBase: path.join(__dirname, 'production'),
        openPage: 'main-pages/en/index.html'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './main-pages/en/index.html',
            template: './frontend/main_pages/tamplate_en.html',
            title: "Index EN"
        }),
        new HtmlWebpackPlugin({
            filename: './main-pages/ru/index.html',
            template: './frontend/main_pages/tamplate_ru.html',
            title: "Index RU"
        }),
        new HtmlWebpackPlugin({
            filename: './main-pages/ge/index.html',
            template: './frontend/main_pages/tamplate_ge.html',
            title: "Index GE"
        }),
        new CleanWebpackPlugin()
    ]
};



module.exports = () => {
    return webpackConf;
};

БЛОГ НА HUSL

Как правильно указать путь для publicPath для webpack-dev-server

Ответы (1 шт):