tris webpack boilerplate
1.0.0
К сожалению, сейчас у меня нет времени и энтузиазма поддерживать этот проект. Я рекомендую создать форк этого проекта или прочитать его исходный код, чтобы узнать, как он устроен.
Этот шаблон веб-пакета предназначен для начинающих, средних и продвинутых разработчиков, стремящихся быстро создавать статические веб-сайты, одновременно добиваясь всех необходимых оптимизаций для достижения отличных результатов в Google Page Speed Insights и Google Lighthouse Reports. Это эволюция шаблона tris-gulp-boiler, теперь с Webpack 4. Webpack — это новый стандарт объединения JS, на который Gulp не способен. К счастью, Webpack может как запускать задачи, так и связывать js?
Цель этого проекта/шаблона — охватить следующих людей:
Новички ? — которые, хотя и используют Gulp/Webpack/Node/Npm, все же нуждаются в более подробных объяснениях, чем более знакомые разработчики. Они хотят, чтобы все работало, но они также хотят знать , как и почему .
Любители сторонних проектов ?♀️ — те, у кого есть отличные идеи, но кто не хочет тратить время на настройку. Им необходимо перенести свои идеи, приложения и веб-сайты в браузер... быстро .
Обсессивно-компульсивные ♂️ — люди, которые любят получать идеальные оценки по производительности и отчетам по оптимизации. Люди, которые организованы в цифровом формате и гордятся тем, что знают, что все их файлы свернуты, сжаты, заархивированы и готовы к отправке!
Не стесняйтесь создать форк этого репозитория и создать свой собственный рабочий процесс на основе этого шаблона! Я понимаю, что все немного разные.
Перед запуском вам потребуются git и node.js на вашем компьютере.
git clone https://github.com/tr1s/tris-webpack-boilerplate.git your-project-name
cd your-project-name && rm -rf .git
npm install
npm start
Все готово, приступайте к кодированию ?? !
Удалите все в папке src/styles/ , src/index.html и src/index.scss/ если вы хотите начать на 100% заново и/или создать свой собственный рабочий процесс Sass. Я основал структуру папок по шаблону 7-1.
npm run build , когда вы будете готовы загрузить свой сайт на выбранную вами платформу FTP/хостинга. Это создаст папку dist со всеми оптимизированными и сжатыми ресурсами вашего веб-сайта.
Если вам нужно подробное объяснение того, как все работает, прочтите о функциях ниже. В противном случае продолжайте программировать и получайте удовольствие :)
tris-webpack-шаблон
Использование
Особенности / Содержание
Объяснение функций
Разделение конфигурации веб-пакета
Сервер разработки веб-пакетов
HTML-ресурсы и минификация
404 страница не найдена
SCSS в CSS + оптимизация
Транспиляция ES6
Список браузеров
Ресурсы изображений + сжатие
Загрузка шрифта + предварительная загрузка
Сжатие активов
Чистый плагин Webpack
Исходные карты
Генерация фавикона
Сначала офлайн и кеширование
Прогрессивное веб-приложение (PWA)
Попался
Содействие
Вместо одного большого webpack.config.js мы разделим наши сборки для производства и разработки на две новые конфигурации, называемые webpack.dev.js и webpack.prod.js . Конфигурации, которые нам нужны как для разработки, так и для производства, будут включены в конфигурацию webpack.common.js .
Когда мы запускаем npm start , он запускает сборку для разработки на основе конфигурации webpack.dev.js , которая также содержит объединенные конфигурации webpack.common.js . Подробнее об этом читайте в документации Webpack.
/* wenpack.dev.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* объединяет webpack.common.js, а затем вы добавляете ваш дополнительный */module.exports = merge(common, {
режим: «развитие»,
/* остальная часть кода находится здесь */}); Когда мы запускаем npm run build , он запускает производственную сборку на основе конфигурации webpack.prod.js , которая также содержит объединенные конфигурации webpack.common.js .
/* webpack.prod.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* объединяет webpack.common.js, а затем вы добавляете ваш дополнительный */module.exports = merge(common, {
режим: «производство»,}); Мы хотим, чтобы наши разработки и производственные сборки визуально давали одинаковые результаты в браузере. Вы не хотите закончить кодирование, запустить сборку, а затем создать совершенно другой веб-сайт, например, с отсутствующими изображениями. Вот почему у нас есть webpack.common.js для управления всеми загрузчиками и активами. webpack.dev.js будет немного отличаться, поскольку будет иметь более легкую исходную карту. Наконец, webpack.prod.js выполнит все заключительные этапы запуска вашего веб-сайта в производство. Это сжатие изображений, сжатие ресурсов (gzip), минимизация ресурсов, генерация значков, кэширование и создание возможностей для работы в автономном режиме.
Ниже я расскажу о каждом процессе.
Сервер webpack-dev настраивается в package.json. npm start запустит сервер и откроет ваш проект в браузере, используя конфигурацию webpack.dev.js . npm start — это сценарий npm по умолчанию, поэтому вам не нужно добавлять в него run . Но для сценария сборки вам нужно ввести npm run build .
"scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js"}, Мы используем html-загрузчик для экспорта HTML в виде строки и минимизации вывода. Это позволит вам импортировать ваш src/index.html в ваш src/index.js . Мы можем просто минимизировать HTML с помощью параметра загрузчика minimize: true , поэтому мы оставляем его в webpack.common.js вместо того, чтобы перемещать его в webpack.prod.js .
/* webpack.common.js */{
тест: /.html$/,
используйте: [{loader: 'html-loader', параметры: { минимизировать: true}
}]},/* src/index.js */import "./index.html";
Затем мы используем html-webpack-plugin для создания нового сгенерированного index.html со всеми правильными импортами ресурсов.
template: указывает, откуда вы извлекаете исходный HTML-код. Вы можете использовать свой собственный HTML-шаблон, шаблон руля или любой из этих других шаблонов.
Опция inject: определяет, куда пойдут ваши активы. Webpack по умолчанию поместит ваш встроенный скрипт webpack-bundle.js в нижнюю часть тела, но здесь я переключил его на head , потому что мы будем использовать скрипт-ext-html-webpack-plugin для добавления атрибута defer к скрипт и поместите его в шапку сайта. Это помогает повысить производительность.
/* webpack.common.js */const HtmlWebpackPlugin = require('html-webpack-plugin');const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");plugins: [
новый HtmlWebpackPlugin({title: 'tris-webpack-boilerplate', имя файла: 'index.html', шаблон: './src/index.html', inject: 'head'
}),
новый HtmlWebpackPlugin({title: 'tris-404-page', имя файла: '404.html', шаблон: './src/404.html', inject: 'head'
}),
новый ScriptExtHtmlWebpackPlugin({defaultAttribute: 'defer'
}),], Продолжайте добавлять new HtmlWebpackPlugin({}) если у вас будет многостраничный веб-сайт. Назовите страницу соответствующим образом, указав title: key.
Netlify — это фантастический бесплатный сервис, который позволяет вам управлять и развертывать свои веб-сайты. Netlify автоматически ищет 404.html и загружает эту страницу, когда кто-то пытается открыть неработающую ссылку на вашем сайте. Так что вам не о чем беспокоиться.
Если вы используете другую службу, изучите, как можно связать свою страницу 404.html , чтобы она была активной. Это отличный способ отправить людей обратно на вашу главную страницу, если они перейдут по неработающей ссылке.
Чтобы использовать Sass/SCSS, нам нужно использовать несколько загрузчиков, чтобы получить желаемые результаты. CSS-загрузчик, postcss-загрузчик и sass-загрузчик.
test: использует регулярное выражение (регулярное выражение) для проверки наличия любых файлов sass, scss или css, а затем запускает их через эти три загрузчика, которые обертываются вокруг плагина mini-css-extract-plugin, который затем генерирует для вас один CSS-файл. использовать в производстве.
Узнайте больше о концепции погрузчиков.
/* webpack.common.js */{
тест: /.(sa|sc|c)ss$/,
используйте: [MiniCssExtractPlugin.loader, { загрузчик: 'css-loader', параметры: {sourceMap: true }}, { загрузчик: 'postcss-loader', параметры: {sourceMap: true }}, { загрузчик: 'sass-loader ', параметры: {sourceMap: true }}
]}, Во второй части последовательности загрузчика, postcss-loader , вы будете минифицировать и автоматически префиксировать свой CSS. Для этого мы создаем postcss.config.js в корне проекта и настраиваем его так...
/* postcss.config.js */const purgecss = require("@fullhuman/postcss-purgecss");module.exports = {
плагины: [require("autoprefixer"),require("cssnano")({ предустановка: "default",}),purgecss({content: ["./**/*.html"], ключевые кадры: true,} ),
],};Прочтите об autoprefixer и cssnano, чтобы при необходимости настроить их по своему вкусу. Дополнительно прочитайте о postcss в целом, так как это очень мощный инструмент, который нужно иметь в своем арсенале.
Purgecss — фантастический плагин postcss, позволяющий избавиться от неиспользуемого CSS в вашем коде. Purgecss анализирует ваш контент и CSS-файлы. Затем он сопоставляет селекторы, используемые в ваших файлах, с селекторами в ваших файлах контента. Он удаляет неиспользуемые селекторы из вашего CSS, в результате чего файлы CSS становятся меньше.
По умолчанию он готов к работе, но если вы хотите проверить его визуально, раскомментируйте @import "../node_modules/bulma/bulma"; в index.scss , а затем запустите npm run build и посмотрите полученный файл webpack-bundle.css в папке dist. Вы заметите, что кода не так уж и много. Затем удалите purgecss из вашего postcss.config.js и снова запустите npm run build . Вы заметите, что в вашем CSS более 10 000 строк кода, взятых из платформы Bulma. Как видите, purgecss идеально подходит для избавления от CSS, который вы не используете, при использовании больших фреймворков, таких как Bootstrap, Foundation, Bulma и т. д.!
Плагин mini-css-extract-plugin — это последний шаг, поскольку он извлекает CSS и присваивает ему имя перед выводом.
/* webpack.common.js */const MiniCssExtractPlugin = require("mini-css-extract-plugin");plugins: [
новый MiniCssExtractPlugin({filename: 'webpack-bundle.css',chunkFilename: '[id].css'
})], В общем... css-loader соберет CSS из всех CSS-файлов, на которые есть ссылки в вашем приложении, и поместит их в строку. Затем postcss-loader автоматически префиксирует и минимизирует ваши стили, затем sass-loader превращает их в модуль JS, а затем mini-css-extract-plugin извлекает CSS из модуля JS в один файл CSS для анализа веб-браузером.
Возможно, вы захотите использовать новейшие функции и синтаксис JavaScript, но пока не все браузеры их поддерживают. Бабель сделает это за нас.
Здесь мы тестируем все js-файлы, за исключением папки node_modules , а затем запускаем их через загрузчик Babel с предустановкой Babel-preset-env.
/* webpack.common.js */{
тест: /.js$/,
исключить: /(node_modules)/,
используйте: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}
}} На этот раз мы углубляемся в файл webpack.prod.js . Когда мы npm run build , наш выходной js будет минимизирован и будет иметь полные исходные карты. При работе в режиме разработки через npm start у нас по-прежнему будут более легкие исходные карты, но js не будет минимизирован.
/* webpack.prod.js */const TerserPlugin = require("terser-webpack-plugin");module.exports = merge(common, {
режим: «производство»,
devtool: "исходная карта",
оптимизация: {минимизатор: [новый TerserPlugin({test: /.js(?.*)?$/i,parallel: true,sourceMap: true, }),],
},});Подробнее о параметрах читайте в более сжатой документации.
Здесь мы хотим иметь одно место, где мы могли бы указать определенным инструментам, для каких браузеров мы хотели бы добавить поддержку. Мы добиваемся этого, используя список браузеров и соответствующий файл .browserslistrc в корне проекта. Autoprefixer и Babel-present-env возьмут этот файл и применят то, что ему нужно, на основе конфигурации.
Узнайте, что еще вы можете передать в .browserslistrc , и используйте браузерl.ist, чтобы узнать, на какие браузеры конкретно будет нацелена ваша конфигурация. Хорошо, кажется, я уже достаточно раз сказал «браузеры»?
/* .browserslistrc */> 0,25% не мертв
Сначала мы проверяем jpeg, jpg, png, gif и svg, используя регулярное выражение (регулярное выражение), затем используем загрузчик файлов, который разрешает импорт и требует файла в URL-адресе, а затем отправляет файл в выходной каталог. Поэтому, если вы используете элемент <img> , который извлекает файл из папки src/images , он будет импортирован и отправлен в указанный выходной путь images . В конечном итоге это src/images если вы npm start (запуск dev) или npm run build (запуск сборки).
/* webpack.common.js */{
тест: /.(jpe?g|png|gif|svg)$/,
use: [{loader: 'file-loader', options: { name: '[name].[ext]', выходной путь: 'images/', publicPath: 'images/'},
}]}, Теперь мы хотим оптимизировать наши изображения только при npm run build , поэтому редактируем наш webpack.prod.js как показано ниже.
Мы снова проверяем jpeg, jpg, png, gif и svg, используя регулярное выражение, и применяем соответствующие оптимизации. gifsicle — компрессор GIF без потерь, pngquant — компрессор PNG с потерями, и мы можем добавить дополнительный плагин под названием imageminMozjpeg для сжатия jpg/jpeg с потерями. Лучше всего установить качество в диапазоне 75–90, и вы должны получить приличное сжатие без потери видимого качества.
Я предлагаю придерживаться сжатия без потерь и обрезать изображения до нужного размера перед добавлением в проект. Для этого просто удалите ключевые разделы imageminMozjpeg и pngquant.
Вы также можете использовать tinypng для сжатия изображений.
/* webpack.prod.js */const ImageminPlugin = require("imagemin-webpack-plugin").default;const imageminMozjpeg = require("imagemin-mozjpeg");plugins: [
new ImageminPlugin({test: /.(jpe?g|png|gif|svg)$/i,gifsicle: { // оптимизация сжатия gif без потерьLevel: 9,},pngquant: { // компрессор PNG с потерями, по умолчанию удалить без потерь качество: "75",}, плагины: [ imageminMozjpeg({// компрессор jpg с потерями, удалить по умолчанию качество без потерь: "75", }),],
}),];Здесь мы тестируем все распространенные расширения шрифтов и снова используем загрузчик файлов для разрешения импорта шрифтов и их вывода.
/* webpack.common.js */{
тест: /.(woff|woff2|ttf|otf)$/,
use: [{loader: 'file-loader', options: { name: '[name].[ext]', выходной путь: 'fonts/', publicPath: 'fonts/'},
}]}, В нашем src/styles/base/_typography.scss мы загружаем шрифты с помощью правила @font-face . Google Webfonts Helper также является отличным инструментом для простого самостоятельного размещения Google Fonts. Узнайте больше о правиле @font-face о CSS-трюках. Кроме того, прочитайте также о свойстве font-display.
Всегда лучше предварительно загружать шрифты. Мы добьемся этого, используя preload-webpack-plugin, и вам нужно будет поместить его сразу после HtmlWebpackPlugin , чтобы он работал правильно.
/* webpack.common.js */new PreloadWebpackPlugin({
rel: 'предварительная загрузка',
as(entry) {if (/.(woff|woff2|ttf|otf)$/.test(entry)) return 'font';
},
fileWhitelist: [/.(woff|woff2|ttf|otf)$/],
включить: 'allAssets'}), Здесь мы вернулись к конфигурации webpack.prod.js , используя компрессор compress-webpack-plugin для сжатия только файлов html, css и javascript. Это сделано для того, чтобы избежать сжатия генерируемых файлов исходной карты.
/* webpack.prod.js */module.exports = merge(common, {
режим: «производство»,
плагины: [new CompressionPlugin({ test: /.(html|css|js)(?.*)?$/i // сжимается только html/css/js, пропускает сжатие исходных карт и т. д.}),}); Clean-webpack-plugin — это простой плагин веб-пакета, позволяющий удалить/очистить папки сборки перед созданием новой. Следите за своей папкой, когда запускаете npm run build или npm start . Ваша текущая папка dist (если она у вас уже была создана) будет удалена, и сразу после этого появится новая.
/* webpack.common.js */const CleanWebpackPlugin = require("clean-webpack-plugin");plugins: [new CleanWebpackPlugin(["dist"])];Использование исходных карт необходимо для отладки вашего кода в инструментах разработки.
Как вы можете видеть, когда вы npm start и откроете инструменты разработчика в Chrome, а затем щелкните консоль, вы увидите два файла console.log, поступающие из строк 1 и 2 script.js Мы легко можем увидеть это в нашей структуре папок по адресу src/scripts/script.js . Если бы мы не использовали исходные карты, то инструменты разработчика показали бы нам, что эти console.logs поступают из нашего связанного файла webpack-bundle.js , что не очень полезно.
Аналогичный случай и с нашими стилями. Если вы посмотрите на элемент body в devtools, вы увидите, что некоторые стили применяются из нашего файла _global.scss , а некоторые — из нашего файла _typography.scss , которые оба расположены в нашей папке src/styles/base/ . Мы бы не смогли этого узнать, если бы не учитывали исходные карты. Он просто показал бы нам, что стили взяты из нашего встроенного файла webpack-bundle.css .
/* webpack.dev.js */module.exports = merge(common, {
режим: «развитие»,
devtool: "inline-source-map",}); /* webpack.prod.js */module.exports = merge(common, {
режим: «производство»,
devtool: "исходная карта",});Узнайте больше о различных типах исходных карт, чтобы найти то, что лучше всего подходит для вашего проекта. Дополнительно прочитайте опцию devtool в документации веб-пакета.
Это отличный плагин, который генерирует каждую иконку, которая вам когда-либо понадобится, на основе одного источника изображения. В моей папке src/images/ у меня есть файл tris-package.svg , который я ввожу в плагин favicons-webpack-plugin.
Он будет генерировать значки для Apple, Android, Chrome, Firefox, Twitter, Windows и т. д. Он сгенерирует каждый значок разных размеров и импортирует их прямо в заголовок вашего веб-сайта, где им и место. Для Twitter и Windows установлено значение false, но по умолчанию, поэтому я изменил их на true, просто чтобы охватить все основы, на всякий случай.
Примечание: это значительно увеличивает время сборки. Это вполне понятно, учитывая, как много он делает под капотом и сколько времени экономит вам в долгосрочной перспективе. Не удивляйтесь, если npm run build займет на 20 секунд больше, чем обычно.
/* webpack.prod.js */const FaviconsWebpackPlugin = require("favicons-webpack-plugin");module.exports = merge(common, {
режим: «производство»,
плагины: [новый FaviconsWebpackPlugin({ logo: "./src/images/favicon.svg", иконки: {twitter: true, windows: true, },}),
],});Здесь мы используем плагин offline-plugin для кэширования всех наших ресурсов при загрузке страницы.
Этот плагин предназначен для обеспечения автономной работы проектов Webpack . Он использует ServiceWorker и AppCache в качестве запасного варианта. Мы просто включаем этот плагин в наш webpack.prod.js и соответствующую среду выполнения в наш клиентский скрипт (src/index.js), и наш проект станет готовым к работе в автономном режиме за счет кэширования всех (или некоторых) выходных ресурсов веб-пакета.
Примечание. Если вы npm run build и загружаете изменения на свой сервер (или продолжаете обновлять свой веб-сайт), ваш веб-сайт необходимо будет закрыть и снова открыть, прежде чем вы увидите изменения. Вы не можете открыть ее и постоянно обновлять, вам нужно закрыть вкладку и снова открыть ее, чтобы кеш разрушился.
/* webpack.prod.js */const OfflinePlugin = require("offline-plugin");module.exports = merge(common, {
режим: «производство»,
плагины: [новый OfflinePlugin()],});Прогрессивные веб-приложения (PWA) — это веб-приложения, которые загружаются как обычные веб-страницы или веб-сайты, но могут предлагать пользователю такие функции, как работа в автономном режиме, push-уведомления и доступ к оборудованию устройства, традиционно доступный только для собственных приложений. PWA сочетают в себе гибкость Интернета и возможности собственного приложения.
Последний шаг для превращения этого шаблона в PWA — добавить обязательный манифест веб-приложения в корень вашего проекта и настроить его соответствующим образом!
Webpack сталкивается с проблемами при попытке объединить большие библиотеки, такие как jQuery. В конечном итоге вы получите ошибки консоли, такие как $ is not defined или jQuery is not defined . Чтобы решить эту проблему, мы позволяем Webpack рассматривать его как внешний. Затем мы определяем переменные и подключаем jQuery через CDN. Несмотря на это, у большинства людей в браузере кэшируется jQuery, поэтому с точки зрения производительности это не будет проблемой. Я добавил externals: config по умолчанию, но вам придется добавить jQuery cdn самостоятельно, если вы планируете его использовать.
Подробнее о внешних возможностях читайте в документации Webpack.
/* webpack.common.js */plugins: [],externals: {
$: 'jquery',
jquery: 'jQuery',
'window.$': 'jquery',}/* src/index.html */<head> <scriptdefersrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script></head>
Я изо всех сил стараюсь объяснить все подробно, но если что-то можно объяснить более четко, пожалуйста, отправьте запрос на включение с некоторыми предлагаемыми изменениями. Спасибо!
Надеюсь, это помогло! Следуйте за мной в Твиттере, если вам это нравится. ?
