Публикации по теме 'webpack'
Представляем tronic - webpack с разумными настройками по умолчанию
Каждый раз, когда я начинаю новый проект, у меня есть рутина. Я открываю предыдущий проект и копирую кучу точечных файлов, package.json и webpack.config.js , и продолжаю изменять их в соответствии с моими потребностями.
Мне не обязательно нужно что-то слишком навороченное. В большинстве случаев все, что мне нужно, - это транспилятор, линтер и какой-то способ импортировать мои стили. Иногда мне даже могут понадобиться изображения или шрифты. Так почему же мой package.json такой..
Что такое выход — Webpack 5
Что такое вывод — Webpack 5
Как работают выходные данные и как они используются в webpack.
Прежде чем продолжить статью, перейдите по ссылкам ниже, если вы пропустили предыдущие статьи
https://yadhus.medium.com/introduction-to-webpack-5-27b1ed350a8 https://yadhus.medium.com/what-is-entry-webpack-5-33eed050dd4
Что такое вывод
Выходные данные — это свойство, которое указывает веб-пакету, где выдавать/сохранять пакеты , которые он создает, и как называть эти файлы..
Webpack встряхивает дерево
Встряхивание дерева - это процесс анализа вашего кода и включения только тех частей, которые вы явно импортируете для запуска вашего приложения.
Хорошо, что такое устранение мертвого кода? Хороший вопрос.
Устранение мертвого кода подходит к проблеме с противоположной стороны. Он анализирует ваш код после его объединения и удаляет код, который не используется в вашем приложении.
В конечном итоге они оба используются для удаления ненужного кода.
При этом, вот один лайнер, который..
Mock Turtles (и фиктивные компоненты)
(Пояснение к названию: https://www.youtube.com/watch?v=sGSHIidlesQ )
Допустим, у нас есть некоторый код, который мы хотели бы протестировать, который зависит от какого-то другого модуля, который мы не хотим использовать в тестах. Возможно, он не запускается в тестовой среде, или обращается к внешним ресурсам (например, сторонним API), или слишком дорог (например, полагается на базу данных).
Мы можем добиться этого, издеваясь над зависимостью. Это означает замену его другим кодом,..
Реагируйте с помощью Webpack и TypeScript:
Реагируйте с помощью Webpack и TypeScript:
Я пытался оштрафовать стартер за вышеперечисленное и не смог, поэтому я создал этот фрагмент.
Вот пакет.json:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader');
module.exports = () => {
return {
stats: {
assets: true,
cached: false,
cachedAssets:..
Конфигурация проекта JavaScript с помощью Webpack.
Мы рассмотрим базовую настройку Webpack для вашего приложения JavaScript. Иногда Webpack может быть головной болью при настройке, и многие люди могут пропустить его настройку и выбрать уже созданные шаблоны, для которых уже все уже настроено.
Итак, давайте познакомимся с базовым пониманием того, как работает Webpack, как его настроить и что он может сделать для нас как разработчиков. Начнем с создания пустого проекта в нашем терминале.
mkdir javascript-webpack-setup
Перейдите во..
Объяснение Webpack для начинающих
Что такое вебпак?
Webpack связывает ваше javascript-приложение, разрешая зависимости и внедряя их в один модуль.
Как работает вебпак?
Как программист вы знаете, что большинство файлов кода зависят от других файлов кода, библиотек или статических ресурсов, таких как изображения и шрифты. Когда веб-пакет начинает обрабатывать ваше приложение, он сначала создает внутренний граф зависимостей от указанной точки входа и идентифицирует необходимые модули в приложении. Затем он объединяет..
