html-webpack-plugin несколько точек входа, добавление всех скриптов - PullRequest
Новая
       23

html-webpack-plugin несколько точек входа, добавление всех скриптов

0 голосов
/ 17 октября 2018

Я строю проект на выброшенном реактиве.Причина, по которой я ее выбросил, заключается в том, что будет создано несколько страниц, и я хотел бы создать несколько автономных сценариев, чтобы они использовали преимущества ES6 и средства отладки, предоставленные в шаблоне.

Моя проблема заключается в том, чтопри использовании метода для построения нескольких страниц с помощью html-webpack-plugin создается сгенерированный файл HTML с обоими сценариями с каждой страницы.

Итак, давайте взглянем на основную точку входа

Вот мой основной конфиг веб-пакета. 

...
entry: {

      devServerClient : require.resolve('react-dev-utils/webpackHotDevClient'),
      // Finally, this is your app's code:
      ...pages,

    },
...

Как вы можете видеть, я использую то же самое оборудование для перезагрузки горячего модуля, которое поставляется с плитой котла, но затем я отклоняюсь, чтобы распространяться взначения из переменной pages, которая требуется от другой страницы: 

const glob = require("glob");
const path = require("path");

const input_path = path.resolve(__dirname, "../src/apps/*/index.js");
const apps_directories = glob.sync(input_path);

let pages = {};

// Loop through them and append them to the pages object for processing.
apps_directories.map(function (app_directory) {
    const split_name = app_directory.split("/");
    pages[split_name[split_name.length - 2]] = app_directory;
});

module.exports = pages;

Вот как я генерирую несколько записей динамически.Эта часть кода работает нормально, но я решил опубликовать ее на тот случай, если здесь что-то должно произойти, если мне не хватает.

Далее У нас есть актуальный раздел плагинов.Я использую подобный подход в модульном коде, поэтому вот эта часть в config (корневой уровень объекта веб-пакета): 

...
plugins: [
    // Generates an `index.html` file with the <script> injected.
    ...HtmlWebpackPlugins,
    ...
]
...

Опять же, я распространяю их, скрипт, который генерирует эти выглядит такИтак: 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const pages = require("./multiplePaths");
const paths = require("./paths");

const NODE_ENV = process.env.NODE_ENV;

let HtmlWebpackPlugins = [];

Object.keys(pages).map(function (fileName) {
    if (NODE_ENV === "development") {
        HtmlWebpackPlugins.push( new HtmlWebpackPlugin({
            inject: true,
            template: paths.appHtml,
            filename: `${fileName}.html`,
        }));
        return;
    }

    HtmlWebpackPlugins.push(new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
        filename:  `${fileName}.html`,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        },
    }));
});

module.exports = HtmlWebpackPlugins;

Этот сценарий здесь генерирует несколько экземпляров класса HtmlWebpackPlugin для каждой записи, и мы также называем html-файл на основе папки, в которой находится имя папки, в которой находится приложение. Это удовлетворяет метод в разделе «Проблемы».

Проблема возникает на сгенерированной HTML-странице.Обратите внимание, что сценарии для всех папок внедряются в каждое приложение:

enter image description here

Как видите, CSS и JS каждого приложения добавляются.Это происходит с обеими страницами.Мне нужны только соответствующие CSS и JS для каждой страницы.

Есть идеи, что здесь происходит?

1 Ответ

0 голосов
/ 17 октября 2018

Если вы хотите добавить только некоторые чанки внутри каждой страницы, вам нужно указать, какие именно чанки вы хотите иметь в своем html как сценарии: 

HtmlWebpackPlugins.push(new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
    filename:  `${fileName}.html`,
    chunks: [filename], // add any chunks you need here (for example, chunk with libraries
    ....
});
...