Создание программы Webpack4+ с несколькими входами

Добро пожаловать в команду веб-разработчиков Futu,несоответствие

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

Итак, давайте поговорим о некоторых вещах о конструкции webpack4+.

Смысл мультивхода, вероятно, в том, что при доступе к разным страницам основные файлы JS-функций фронтенда разные. Лучшее сравнение и различие - это одностраничное приложение SPA, файлы, импортируемые каждой страницей, представляют собой один и тот же файл JS.

Моя ожидаемая сборка:

Один ходил (прохладный точный процесс кодирования)
БЕСПЛАТНО без задних ограничений языка (развязка)
Многовход (многовход, многостраничность)

За один раз, что означает, что проект начинается с вашего исполненияgit clone, код вытягивания запускается до тех пор, пока выgit pushНажмите код. Между тем все, что не имеет ничего общего с кодированием, делается за один раз и не требует от вас слишком много настройки. Чего я надеюсь достичь, так это максимального опыта кодирования. Ожидается, что на протяжении всего процесса разработчики будут заботиться только об одном: в порядке ли написанный ими код.

Это также означает, что сборка веб-пакета требует дополнительной работы.

Говоря об отрыве от языка бэкенда, это нехорошо, это просто зависит от того, подходит проект или нет. В недавно написанном проекте я использовалvue + Node.js. Использование vue обычно означает, что в файле шаблона очень мало кода другого шаблона Node.js (например, jade, swig) и очень мало внешнего кода. То есть пустая страница оболочки.Те, кто делал одностраничные SPA-приложения, должны быть с ней знакомы.

То есть эта пустая страница оболочки, на самом деле, нет большой связи с внутренним языком. Это также означает, что я могу в значительной степени разделить внешний и внутренний код. Что это значит?

Только представьте, что в процессе разработки нужно обращать внимание всего на две вещи: страницы и статические ресурсы. Единственное, что связано с бэкендом в кодинге — это страница, Как было сказано выше, при использовании vue для SPA страница фактически не связана с бэкендом.

Другими словами, это обеспечивает удобство для разделения интерфейсной и конечной структур. Все интерфейсные ресурсы могут быть независимыми, если гарантируется, что после сборки страница и статические ресурсы могут быть сгенерированы в указанном каталоге проекта.

Эта сборка здесь сделана webpack.

На картинке выше отмечено:

Клиент: это каталог внешнего ресурса.
Сервер: это каталог, где размещены бэкэнд ресурсы. Здесь, если бэкэн - Node.js
static: каталог статических ресурсов. Именно там размещаются файлы js/css

Тогда вот вопрос, над которым стоит подумать в первую очередь: какова цель построения webapck? Реализовано в проекте, какова цель строительства?

В сочетании с приведенной выше диаграммой структуры каталогов, если целью веб-пакета является упаковка и компиляция статических ресурсов, то в инженерии это упаковка и компиляция интерфейсных ресурсов.clientРесурсы каталога строятся webpack по указанномуstaticа такжеserver/viewsсодержание.

Обеспечивает ли это большую степень развязки?

Как изменить проект сборки webpak с одной записью в проект сборки с несколькими записями? Это проблема, которую эта статья должна решить сегодня, проблема, которую мне всегда нужно было решить, и первоначальный замысел написания этой статьи.

Перед лицом этой проблемы построения программы с несколькими входами давайте начнем с текущей ситуации.

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

Текущий статус сборки веб-пакета

Все это время я делал сборки только с одной записью для сборок веб-пакетов. Также известен как СПА. На работу проекта это не влияет, потому что у проекта одна функция, четкие цели, а файл ресурсов не будет слишком большим, поэтому после упаковки и сжатия выходной файл будет не очень большим, и его можно поделены соответствующим образом.

Как показано на рисунке, конструкция очень проста, с одной записью и одной страницей. Все документы проходят черезmain.jsОн импортируется со своим импортированным подмодулем, чтобы сформировать единую запись. Как классический SPA-проект, просто входная страницаindex.html, внешний переход завершается взаимодействием внешней и внутренней маршрутизации.

Итак, что нужно сделать с помощью webpack, на самом деле очень легко понять:

Импортируйте модуль разбора соответствующего файла. Например:vue-loader,babel-loader,css-loaderЖдать
Извлеките css для внешнего представления, черезlinkЗнакомство с этикеткой
сжатие файлов
Разделение большого файла
Извлечь общие файлы как отдельные файлы
пройти черезhtml-webpack-pluginВведите все зависимые js / css и другие статические ресурсы в файл шаблона и сохраняют сгенерированный целевой файл в указанный каталог файла шаблона сервера

Все сказанное, на самом деле, интерфейс должен обрабатывать только 3 файла в конце.html,js,css.

адрес демо подробности -->>Случай с однократным въездом

webpack4+ многозаходные конструкторские идеи

Теперь, когда вы уже знаете, как работает однократная сборка. Итак, давайте подумаем, как играть в многовходовую конструкцию webpack.

Не говоря уже о том, как настроить webpack. С точки зрения спроса, а не только ожиданий:

Есть много входных файлов
Создано много файлов шаблонов html. будет генерировать здесьserver/viewsсодержание
Файл шаблона html может импортировать статические ресурсы, такие как js/css, необходимые его собственному модулю, а другие модули не импортируются, чтобы избежать избыточного кода.

Статический ресурс js/css на картинке выше будет сгенерирован и сохранен вstaticсодержание.

То есть на картинке вышеpagea.jsФайл записи, после того как он будет создан webpack, будет только введенpagea.html. без инъекцийpageb.html.

На самом деле здесь есть трудность, только одна:Как сделать так, чтобы файл шаблона html соответствующего файла ввода вводил js/css, относящийся только к этому модулю.

webpack4+ боевая конфигурация сборки с несколькими входами

Так что не бред, а как его настроить в реальном бою? Боюсь, я не единственный, кто хочет знать. На самом деле, каждая из вышеперечисленных проблем имеет здесь решение.

Как показано на рисунке, вы можете видеть конфигурацию с несколькими входами, которая очень проста вentryПросто добавьте соответствующую запись модуля.

entry:{//入口文件
  pagea:'./client/pagea/index.js', 
  pageb:'./client/pageb/index.js'
}

В демо есть 2 входных файла здесьpagea.jsа такжеpageb.js.

за этоКак сделать так, чтобы файл шаблона html соответствующего файла ввода вводил js/css, относящийся только к этому модулювопрос.

в состоянии пройтиhtml-webpack-pluginрешить. Сначала настройте несколькоhtml-webpack-pluginобъект экземпляра, а затем укажите, что должен представлять каждый объект экземпляра.chunksфайл.

new HtmlWebpackPlugin({
    filename: './../../server/views/pagea.html',
    chunks:['pagea'],
    template: path.resolve(__dirname , './client/template.html')
}),
new HtmlWebpackPlugin({
    filename: './../../server/views/pageb.html',
    chunks:['pageb'],
    template: path.resolve(__dirname , './client/template.html')
})

Конфигурация здесь проста.pagea.htmlтолько импорт конфигурацииpagea.js. Когда вам нужно импортировать более одного модуля, вам нужно всего лишь добавить в массив имя соответствующего модуля.

После завершения настройки посмотрим, что получится в результате.

воплощать в жизньnpm installСначала загрузите необходимые модули, а затем выполнитеwebpackкоманда построить.

Пожалуйста, установите веб-пакет глобально, требуется версия 4.5+.

Как видите, с помощью упаковки и компиляции веб-пакета генерируется то, что мы хотим.pagea.htmlа такжеpageb.html. И инъекция файла js работает нормально.

который теперь исполняемыйnpm run developкоманда для запуска службы node.js. открыть в браузере127.0.0.1:4000Я видел страницу.

pagea.htmlа такжеpageb.html, нормально импортировать и нормально запускать. Готово! ! ! !

адрес демо подробности -->>Многократный случай

оптимизация webpack4+

Когда вы думаете, что все спокойно, вот тогда начинается вызов. Достичь нескольких входов на самом деле кажется довольно простым. На самом деле, чтобы преуспеть, расстояние еще очень далеко. Следующие страницы на самом деле имеют мало общего с многопортовой конструкцией. В основном некоторые моменты основаны на оптимизации webpack4+, то есть решения сопутствующих проблем.

Модуль Split Chunks разделен

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

когда я былpagea.jsпопробуй импортироватьvue,tui-chartПри использовании модуля диаграммы было обнаружено, что упакованные файлы слишком велики, достигая2.2MB, даже после сжатия.

Тогда самое время ввести разбиение файлов, т.к. после webpack4+ повторно использовать его не рекомендуетсяCommonChunksмодуль, поэтому используйте новый официально рекомендованныйSplitChunksмодуль.

через вебпакpluginВнутрь добавить:

new webpack.optimize.SplitChunksPlugin({
    chunks: 'all',
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '-',
    name: true,
    cacheGroups: {
        vue: {
            test: /[\\/]node_modules[\\/]vue[\\/]/,
            priority: -10,
            name: 'vue'
        },
        'tui-chart': {
            test: /[\\/]node_modules[\\/]tui-chart[\\/]/,
            priority: -20,
            name: 'tui-chart'
        }
    }
})

Есть много способов добавить splitChunks, приведенный выше — лишь один из них.

вcacheGroupsУстановите общедоступные модули внутри, чтобы добиться повторного использования модуля. Следует отметить, что вhtml-webpack-pluginПредставлено в примереchunksКогда соответствующий модуль необходимо добавить.

new HtmlWebpackPlugin({
    filename: './../../server/views/pagea.html',
    chunks:['vue','tui-chart','pagea'],
    template: path.resolve(__dirname , './client/template.html')
})

надpagea.htmlнужно не только представитьpagea, также необходимо ввестиvueа такжеtui-chart.

Судя по рисунку, размер файла js, отделенного от последнего увиденного пакета, по-прежнему очень значителен.

Извлечение MiniCssExtract как внешний CSS

После разговора о разделении объема JavaScript, на самом деле есть проблема с CSS. То есть вышеприведенную демку я не проходилlinkЗнакомство с этикеткой. Эта проблема будет решена здесь.

webpack4+ предоставляет новый модуль под названием MiniCssExtract. Этот модуль может обрабатывать.cssПроблемы, вызванные внешними ссылками.

первый вrulesВнутри конфигурации:

{
  test: /\.s?[ac]ss$/,//postcss-loader 依赖 postcss-config.js
  use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader'] 
}

в основном оригиналstyle-loaderзаменитьMiniCssExtractPlugin.loader. Различные введения также возможны, если вам нужно различать среды.

Тогда нужно сделать нижеpluginsПредставлять:

new MiniCssExtractPlugin({ //提取为外部css代码
    filename:'[name].css?v=[contenthash]'
})

Когда все сделано. Выполнить соответствующую команду.

Как видите, генерированный файл HTML успешно представляет файлы, которые вам нужны.

Это успешно? Ха-ха. . . . .

Проверьте это сейчас! ! ! ! ! ! Обязательно проверьте. . . . . . . . . .

адрес демо подробности -->>Случай оптимизации с несколькими входами

Суммировать

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

Наконец, есть вопрос, то есть все ли файлы, сгенерированные после упаковки, можно включить в репозиторий?

Здесь я даю так называемый ответ в этой статье:Большой фронтальный путь Pony — предварительное исследование Node.js