Можно ли настроить Вебпак на выборочное подключение скриптов?

Question

[romaro]

У меня готов простенький фреймворк для управления html-формами. И нужно по-разному инициализировать классы этого фреймворка на разных страницах. То есть хотелось бы, чтобы JS-код фреймворка при сборке попадал в бандл (стандартное поведение вебпака), а инстанцирующие скприты подключались бы к страницам как отдельные файлы (или фрагменты кода). Главное, чтобы у этих скриптов после минификации сохранялось бы общее пространство имен.

Уже третий день бьюсь над этой задачей, но путного решения не нашел. Поэтому буду благодарен за любую помощь.

Я нашел плагин HtmlWebpackTagsPlugin, который дополняет функционал HtmlWebpackPlugin и тупо добавляет ссылки на файлы с JS-скриптами.

Мне нужно что-то подобное, только вместо набора ссылок указывать названия файлов. Эти файлы Вебпак бы загружал как модули, прогонял бы через Бабель и инжектил бы в нужные файлы. То есть конфиг мог бы выглядеть примерно так:

new HtmlWebpackScriptInjectPlugin({
        // Файл со скриптом для конкретной страницы
        filesWithScripts: ['../scripts/scriptForMainPage'],
        append: true,
        // Название файла, в который нужно вставить ссылку на скрипт
        destinationFiles: ['./views/main_page.njk']
    })
]

Есть ли готовое решение моей задачи или без вариантов писать свой плагин?

Answer 1

[romaro]

Вроде бы смог решить свою задачу при помощи плагина html-webpack-injector и настройки чанок. Пример кода:

const testArr2 = [
    new HtmlWebpackPlugin({
        template: `./templates/pages/test.ejs`,
        filename: `./views/test.njk`,
        chunks: ['index', 'chunk1']
    }),
    new HtmlWebpackInjector(),
    new HtmlWebpackPlugin({
        template: `./templates/pages/test2.ejs`,
        filename: `./views/test2.njk`,
        chunks: ['index', 'chunk2']
    }),
    new HtmlWebpackInjector()
]

export default {
    context: path.resolve(__dirname, 'source'),
    entry: {
        index: './entry.js',
        chunk1: './templates/pages/chunk1.js',
        chunk2: './templates/pages/chunk2.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public'),
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        ...testArr2
< some code >

Осталась только проблема с минификацией: у каждого файла собственное пространство имен и, как следствие, из чанок я не могу сослаться на классы в основном бандле. Но как я понимаю, это особенность работы лоудеров вебпака: они обрабатывают файлы по отдельности и не объединяют их в общий пул.

В связи с этим вопрос по минификации: как запретить лоудеру бабеля (babel-loader) менять названия идентификаторов в коде при компиляции в режиме production? Как я понимаю, это единственный выход.

Попробовал применить в настройках, не помогло:

{
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        minified: false
                    }
                }
            },