многостраничная упаковка webpack

Webpack

Введение

Мы не можем написать только одну страницу в разработке, и каждый раз нам приходится писать много страниц.В настоящее время для повышения эффективности разработки мы используем интерфейсный инструмент автоматизации webpack, так как webpack упаковывает страницы? Как упаковать несколько страниц?

Одностраничная упаковка

Мы умеем упаковывать одну страницу, это очень просто, настраиваем запись, и html плагин,

const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path: path.join(__dirname, 'dist'),
        filename: 'js/index.js'
    }
    ...
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            hash: true,
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        })
    ]
}
Приведенная выше конфигурация предназначена для упаковки одной страницы кода. См. значение конкретных элементов конфигурации.HTMLWebpackPlugin;

Как упаковать несколько страниц

После изучения веб-пакета я чувствую, что могу настроить веб-пакет, и он может работать, но процесс обучения является одностраничным, как упаковать так много страниц? По сути, принцип многостраничной упаковки такой же, как и у одностраничной упаковки, только настроить несколько соответствующих записей, выходов и объектов HtmlWebpackPlugin, можно, конечно, так:

const config = {
    entry:{
        index:'./src/index.js'，
        info:'./src/index.js'
    },
    output:{
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].js'
    }
    ...
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            chunks:['index'],
            hash: true,
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'info.html',
            template: './src/info.html',
            hash: true,
            chunks:['info'],
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        })
    ]
}

Если вы будете внимательны, то обнаружите, что я изменил несколько мест. Во-первых, я изменил «js/index.js» в output.filename на «js/[name].js», потому что у нас несколько страниц. , каждой странице соответствует соответствующий js, чтобы было удобно управлять.Во-вторых, к объекту HtmlWebpackPlugin добавлен атрибут chunks.Атрибут chunk позволяет выбрать соответствующий модуль js;

Конечно, нет никаких проблем с описанным выше способом написания. Не имеет значения, если будет всего две страницы. Тогда будет десять или больше. Мы делаем повторяющиеся вещи. Это не стиль наших программистов. только сделать программы ленивыми.Разве это не для сотрудников?(Конечно там высокие зарплаты(#^.^#)), тогда давайте избавимся от этих повторяющихся вещей;

Во-первых, мы используем объект Node glob, чтобы получить наш существующий html или js;

/**
*
* @param {string}  globPath  文件的路径
* @returns entries
*/
function getView(globPath,flag){
    let files = glob.sync(globPath);

    let entries = {},
    entry, dirname, basename, pathname, extname;

    files.forEach(item => {
        entry = item;
        dirname = path.dirname(entry);//当前目录
        extname = path.extname(entry);//后缀
        basename = path.basename(entry, extname);//文件名
        pathname = path.join(dirname, basename);//文件路径
        if (extname === '.html') {
            entries[pathname] = './' + entry;
        } else if (extname === '.js') {
            entries[basename] = entry;
        }
    });

    return entries;
}

Теперь, когда у нас уже есть функция getView(), мы можем получить файлы html и js, а затем определить, сколько записей и сколько страниц;

let entriesObj = getView('./src/js/*.js');

let config = {
    entry:entriesObj,
    ...
}

Мы настроили запись выше, нам не нужно добавлять ее вручную, записей столько, сколько js;

let pages = Object.keys(getView('./src/*html'));

pages.forEach(pathname => {
    let htmlname = pathname.split('src\\')[1];
    let conf = {
        filename: `${htmlname}.html`,
        template: `${pathname}.html`,
        hash: true,
        chunks:[htmlname],
        minify: {
            removeAttributeQuotes:true,
            removeComments: true,
            collapseWhitespace: true,
            removeScriptTypeAttributes:true,
            removeStyleLinkTypeAttributes:true
        }
    }

    config.plugins.push(new HtmlWebpackPlugin(conf));
});

Наконец, мы получаем HTML-страницу и добавляем объект HTMLWebpackPlugin соответствующей страницы;

постскриптум

Выполнив три вышеуказанных шага, вы можете настроить инструмент webpack, который может упаковать несколько страниц, мой уровень относительно ограничен, в процессе написания может быть много неясных слов, пожалуйста, потерпите меня, а также попросите Бога сделать кирпич, много советов

разное

Для других конфигураций веб-пакета см.

Категории