Как обновить webpack через npm

Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.

Подготовка

Для начала установите Node.js с официального сайта https://nodejs.org, если у вас его ещё нет. Затем создайте новую папку для проекта и перейдите в нее с помощью командной строки или терминала. В нашем случае это папка two_numbers , но у вас может быть любая другая.

mkdir two_numbers cd two_numbers 

Инициализация проекта

Находясь внутри папки, инициализируйте проект с помощью следующей команды:

npm init -y 

Эта команда создаст файл package.json , который является основным файлом для управления зависимостями и настройками проекта на Node.js.

Параметр -y означает, что все вопросы, которые обычно задаются при создании файла package.json , будут пропущены, и будут использованы значения по умолчанию. В результате будет создан файл package.json с минимальными настройками, без дополнительного ввода со стороны пользователя.

Он выглядит примерно так:

< "name": "two_numbers", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "start": "webpack serve", "build": "webpack" >, "keywords": [], "author": "", "license": "ISC", "devDependencies": < "css-loader": "^6.7.3", "style-loader": "^3.3.2", "webpack": "^5.78.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.13.2" >> 

Установка webpack, webpack-cli и webpack-dev-server

Установите webpack , webpack-cli и webpack-dev-server с помощью следующей команды:

npm install webpack webpack-cli webpack-dev-server --save-dev 

Команда webpack-cli позволит запускать Webpack из терминала.

webpack-dev-server — это удобный сервер разработки с горячей перезагрузкой. Это означает, что при изменении файлов в вашем проекте сервер автоматически пересоберёт сборку и обновит страницу в браузере. Без этого пакета вам придется самостоятельно настраивать сервер разработки и обновлять страницу в браузере после каждого изменения в коде.

О ключе —save-dev мы уже писали в одной из статей журнала.

Установка css-loader и style-loader

Webpack по умолчанию обрабатывает только JavaScript-файлы, поэтому для корректной работы с другими типами файлов, такими как CSS или HTML, необходимы специальные загрузчики и плагины.

css-loader позволяет Webpack обрабатывать и импортировать CSS в JavaScript-файлы. Он интерпретирует @import и url() как import/require() и разрешает их. В результате, после обработки css-loader , ваш CSS будет представлен в виде строки в JavaScript-коде.

style-loader . Поскольку после обработки css-loader ваш CSS превратился в строку JavaScript, style-loader используется для внедрения этих стилей в DOM. style-loader добавляет тег внутри вашего HTML-файла, содержащий все стили, включенные в сборку.

Таким образом, чтобы импортировать CSS в наш проект, нам нужно установить style-loader и css-loader . Для этого выполните следующую команду:

npm install style-loader css-loader --save-dev 

Установка html-webpack-plugin

html-webpack-plugin автоматически генерирует HTML-файл на основе шаблона, вставляет туда ссылки на ваши файлы (например, JavaScript и CSS), и сохраняет его в указанной директории (обычно в папке dist )

npm install html-webpack-plugin --save-dev 

C подготовкой и установкой закончили, теперь переходим к структуре проекта и коду.

Структура проекта

Для удобства откройте папку с проектом прямо в VS Code через меню Файл→Открыть папку (File→Open Folder). В итоге слева будет находиться структура проекта и все файлы, а справа вы будете их редактировать.

В корне проекта создайте пустой файл webpack.config.js и добавьте туда следующий код базовой конфигурации проекта. Обратите внимание на поясняющие комментарии.

const path = require('path'); // Импортируем модуль "path" для работы с путями файлов const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = < entry: './src/index.js', // Точка входа для сборки проекта output: < filename: 'bundle.js', // Имя выходного файла сборки path: path.resolve(__dirname, 'dist'), // Путь для выходного файла сборки >, module: < rules: [ < test: /\.css$/, // Регулярное выражение для обработки файлов с расширением .css use: ['style-loader', 'css-loader'], // Загрузчики, используемые для обработки CSS-файлов >, ], >, plugins: [ new HtmlWebpackPlugin(< template: './src/index.html', >), ], devServer: < static: < directory: path.join(__dirname, 'dist'), // Каталог для статики >, open: true, // Автоматически открывать браузер >, mode: 'development', // Режим сборки >; 

В файле package.json измените поле scripts на следующее:

"scripts": < "start": "webpack serve", "build": "webpack" >, 

Это позволит запускать сервер разработки и сборку проекта с помощью кратких и удобных команд npm start и npm run build , вместо того чтобы вводить полные команды в терминал каждый раз.

Теперь создайте внутри проекта папку src , а в ней пустой файл index.js . В этом файле напишем основной код приложения, которое складывает два числа из текстовых полей.

function addNumbers() < const num1 = parseFloat(document.getElementById("number1").value); const num2 = parseFloat(document.getElementById("number2").value); const result = num1 + num2; document.getElementById("result").innerText = `Result: $`; > document.getElementById("calculate").addEventListener("click", addNumbers); 

Теперь создайте в той же папке файл index.html и добавьте туда этот код:

         Сложить   

В папке src создайте файл styles.css и добавьте следующий код:

body < display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; >input, button, p

Итоговая структура проекта после всех действий будет выглядеть так:

Теперь ваш проект готов к использованию. Для запуска сервера разработки выполните следующую команду в терминале:

npm start 

Webpack автоматически откроет браузер, и вы увидите страницу с текстовыми полями для ввода чисел и кнопкой Add. Также после запуска сервера вы можете перейти по адресу localhost:8082 .

В открывшемся окне ведите два числа и нажмите кнопку Add для выполнения сложения. Результат будет отображаться под кнопкой. Готово!

Так зачем использовать Webpack

Webpack позволяет легко структурировать код, разделяя его на модули и импортируя их при необходимости. Если в дальнейшем вы решите добавить сторонние библиотеки или фреймворки, то Webpack поможет вам интегрировать их в ваш проект, минимизировать размер файла сборки и улучшить производительность. А с использованием webpack-dev-server вы получаете автоматическую перезагрузку страницы при изменении исходного кода, что ускоряет процесс разработки.

В этом примере мы использовали только базовые возможности Webpack, но с его помощью вы можете сделать гораздо больше, например, обрабатывать и минифицировать CSS, использовать различные загрузчики (loaders) и плагины для транспиляции и оптимизации кода.

Если хотите лучше разобраться в Webpack, записывайтесь на курс — там узнаете все подробности и научитесь использовать Webpack как профи.

Дальше

• Что такое Webpack
• Как копировать статические файлы с помощью Webpack

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

• 10 августа 2023

Горячие клавиши Figma для быстрой работы

Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.

А если не пользуетесь — попробуйте.

• 7 августа 2023

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

• 2 августа 2023

Инструменты для работы со шрифтами

Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.

Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.

• 29 июня 2023

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

• 13 июня 2023

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

• 11 июня 2023

10 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

• 9 июня 2023

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

• 6 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

• 12 апреля 2023

Webpack: инструкция по применению

Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.

CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev 

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; 

В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .

Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; 

В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

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

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :

npm install file-loader --save-dev 

Затем добавьте его в конфигурационный файл webpack.config.js :

module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; 

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev 

Затем добавить в конфигурационный файл webpack.config.js :

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; 

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

• 30 марта 2023

To v5 from v4

This guide aims to help you migrating to webpack 5 when using webpack directly. If you are using a higher level tool to run webpack, please refer to the tool for migration instructions.

Preparations

Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your Node.js if you’re still running an older one.

Upgrade webpack 4 and its plugins/loaders

1. Upgrade webpack 4 to the latest available version.
   • When using webpack >= 4, upgrading to the latest webpack 4 version should not require additional guidance.
   • If you are using webpack version less than 4 please see the webpack 4 migration guide.
2. Upgrade webpack-cli to the latest available version (when used)
3. Upgrade all used Plugins and Loaders to the latest available version Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5. Make sure to read release notes of each individual plugin/loader when upgrading it, since latest version might only support webpack 5 and will fail in v4. In such case, it’s recommended to update to the latest version that supports webpack 4.

Make sure your build has no errors or warnings

There might be new errors or warnings because of the upgraded versions of webpack , webpack-cli , Plugins and Loaders. Keep an eye for deprecation warnings during the build.

You can invoke webpack this way to get stack traces for deprecation warnings to figure out which Plugins and Loaders are responsible.

node --trace-deprecation node_modules/webpack/bin/webpack.js

As webpack 5 removes all deprecated features, make sure there’s no webpack deprecation warnings during the build in order to proceed.

Make sure to use mode

Set mode to either production or development to make sure that corresponding defaults are set.

Update outdated options

Update the following options to their new version (if used):

• optimization.hashedModuleIds: true → optimization.moduleIds: ‘hashed’
• optimization.namedChunks: true → optimization.chunkIds: ‘named’
• optimization.namedModules: true → optimization.moduleIds: ‘named’
• NamedModulesPlugin → optimization.moduleIds: ‘named’
• NamedChunksPlugin → optimization.chunkIds: ‘named’
• HashedModuleIdsPlugin → optimization.moduleIds: ‘hashed’
• optimization.noEmitOnErrors: false → optimization.emitOnErrors: true
• optimization.occurrenceOrder: true → optimization:
• optimization.splitChunks.cacheGroups.vendors → optimization.splitChunks.cacheGroups.defaultVendors
• optimization.splitChunks.cacheGroups.test(module, chunks) → optimization.splitChunks.cacheGroups.test(module, < chunkGraph, moduleGraph >)
• Compilation.entries → Compilation.entryDependencies
• serve → serve is removed in favor of DevServer
• Rule.query (deprecated since v3) → Rule.options / UseEntry.options
• Rule.loaders → Rule.use

Test webpack 5 compatibility

Try to set the following options in your webpack 4 configuration and check if build still works correctly.

module.exports =  // . node:  Buffer: false, process: false, >, >;

You have to remove these options again when upgrading your configuration for webpack 5.

tip

webpack 5 removes these options from the configuration schema and will always use false .

Upgrade webpack to 5

Now let’s upgrade webpack to version 5:

• npm: npm install webpack@latest
• Yarn: yarn add webpack@latest

If you were not able to upgrade some plugins/loaders to the latest in Upgrade webpack 4 and its plugins/loaders step, don’t forget to upgrade them now.

Clean up configuration

• Consider removing optimization.moduleIds and optimization.chunkIds from your webpack configuration. The defaults could be better, because they support long term caching in production mode and debugging in development mode.
• When using [hash] placeholder in webpack configuration, consider changing it to [contenthash] . It is not the same, but proven to be more effective.
• If you are using Yarn’s PnP and the pnp-webpack-plugin , we have good news: it is supported by default now. You have to remove it from the configuration.
• If you are using IgnorePlugin with a regular expression as argument, it takes an options object now: new IgnorePlugin(< resourceRegExp: /regExp/ >) .
• If you are using something like node.fs: ’empty’ replace it with resolve.fallback.fs: false .
• If you are using watch: true in webpack Node.js API, remove it. There’s no need to set it as it’s indicated by the compiler method you call, either true for watch() or false for run() .
• If you have rules defined for loading assets using raw-loader , url-loader , or file-loader , please use Asset Modules instead as they’re going to be deprecated in near future.
• If you have target set to a function, update it to false and apply that function within plugins option. See example below:

// for webpack 4  target: WebExtensionTarget(nodeConfig) > // for webpack 5  target: false, plugins: [ WebExtensionTarget(nodeConfig) ] >

If you were using WebAssembly via import, you should follow this two step process:

• Enable the deprecated spec by setting experiments.syncWebAssembly: true , to get the same behavior as in webpack 4.
• After successful migration to webpack 5, change the experiments value to experiments: < asyncWebAssembly: true >to use the up-to-date spec for WASM integration.

• It’s recommended to use either the defaults or optimization.splitChunks: < chunks: 'all' >.
• When using a custom configuration, drop name: false and replace name: string | function with idHint: string | function .
• It was possible to turn off the defaults by setting optimization.splitChunks.cacheGroups: < default: false, vendors: false >. We don’t recommend doing this, but if you really want to get the same effect in webpack 5: optimization.splitChunks.cacheGroups: < default: false, defaultVendors: false >.

Consider removing defaults:

• Using entry: ‘./src/index.js’ : you can omit it, that’s the default.
• Using output.path: path.resolve(__dirname, ‘dist’) : you can omit it, that’s the default.
• Using output.filename: ‘[name].js’ : you can omit it, that’s the default.

Need to support an older browser like IE 11?

• If you have browserslist enabled for your project, webpack 5 will reuse your browserslist config to decide which code style to emit for the runtime code. Make sure to:
  1. set target to browserslist or remove target letting webpack set browserslist automatically for you.
  2. add a IE 11 to your browserslist configuration.
• Without a browserslist webpack’s runtime code uses ES2015 syntax (e.g., arrow function) to build smaller bundles. Hence you’ll need to set target: [‘web’, ‘es5’] to use the ES5 syntax for browsers (like IE11) which don’t support ES2015 syntax .
• For Node.js, builds include the supported Node.js version in the target option and webpack will automatically figure out which syntax is supported, e.g. target: ‘node8.6’ .

Cleanup the code

Using /* webpackChunkName: ‘. ‘ */

Make sure to understand the intention:

• The chunk’s name here is intended to be public.
• It’s not a development-only name.
• Webpack will use it to name files in production and development modes.
• Webpack 5 will automatically assign useful file names in development mode even when not using webpackChunkName .

Using named exports from JSON modules

This is not supported by the new specification and you will get a warning. Instead of:

import  version > from './package.json'; console.log(version);

import pkg from './package.json'; console.log(pkg.version);

Cleanup the build code

• When using const compiler = webpack(. ); , make sure to close the compiler after using it: compiler.close(callback); .
  • This doesn’t apply to the webpack(. callback) form which automatically closes.
  • This is optional if you use webpack in watching mode until the user ends the process. The idle phases in watch mode will be used for this kind of work.

  Run a single build and follow advice

  Please make sure to read the building errors/warnings carefully. If there is no corresponding advice, please create an issue and we will try to resolve it.

  Repeat the following steps until you solved at least level 3 or 4:

  • Level 1: Schema validation fails. Configuration options have changed. There should be a validation error with a BREAKING CHANGE: note, or a hint of which option should be used instead.
  • Level 2: Webpack exits with an error. The error message should tell you what needs to be changed.
  • Level 3: Build Errors. The error message should have a BREAKING CHANGE: note.
  • Level 4: Build Warnings. The warning message should tell you what can be improved.
  • Level 5: Runtime Errors. This is tricky. You probably have to debug to find the problem. General advice is difficult here. But we do list some common advice below regarding Runtime Errors:
    • process is not defined.
      • webpack 5 does no longer include a polyfill for this Node.js variable. Avoid using it in the frontend code.
      • Want to support browser usage? Use the exports or imports package.json field to use different code depending on the environment.
        • Also use the browser field to support older bundlers.
        • Alternative: Wrap code blocks with the typeof process checks. Note that this will have a negative impact on the bundle size.
        • Consider using VARIABLE instead and make sure to check typeof VARIABLE !== ‘undefined’ too. process.env is Node.js specific and should be avoided in frontend code.
        • Not all ecosystem tooling is ready for the new default automatic publicPath via output.publicPath: «auto»
          • Use a static output.publicPath: «» instead.
          • You can hide deprecation warnings by running node with —no-deprecation flag, e.g.: node —no-deprecation node_modules/webpack/bin/webpack.js . This should only be a temporary workaround.
          • Plugins and Loaders contributors can follow the advice in the deprecation messages to improve the code.
          • Profile where the time is spent.
            • —profile —progress displays a simple performance profile now
            • node —inspect-brk node_modules/webpack/bin/webpack.js + chrome://inspect / edge://inspect (see profiler tab).
              • You can save these profiles to files and provide them in issues.
              • Try using —no-turbo-inlining flag for better stack traces in some cases.
              • module.unsafeCache: true
              • But this might affect the ability to handle some of the changes to the code base
              • Backward-compatibility layer for the deprecated features will usually have worse performance compared to the new features.
              • Creating many warnings can affect build performance, even if they are ignored.
              • Source Maps are expensive. Check devtool option in the documentation to see a comparison of the different options.
              • Anti-Virus protection might affect performance of the file system access.
              • Persistent Caching can help to improve the repetitive full builds.
              • Module Federation allows to split the application into multiple smaller builds.

              Everything works?

              Please tweet that you have successfully migrated to webpack 5. Tweet it

              It is not working?

              Create an issue and tell us about the issues you have encountered during the migration.

              Something missing in this guide?

              Please open a Pull Request to help the next person using this guide.

              Changes to internals

              The changes to webpack internals such as: adding types, refactoring code and methods renaming are listed here for anyone interested. But they are not intended as a part of common use-case migration.

              • Module.nameForCondition , Module.updateCacheModule and Module.chunkCondition are no longer optional.

              getOptions method for Loaders

              Webpack 5 ships with built-in this.getOptions method available in loader context. This is a breaking change for loaders that had been using getOptions method from previously preferred schema-utils:

              • this.getOptions is available since webpack 5
              • Instead of JSON5 it supports JSON as a query string: ? → ? . Using JSON5 should be considered and documented as deprecated in favor of JSON in the respective Loader’s documentation.
              • loader-utils has specific behavior for parsing query strings ( true , false and null won’t be parsed as string but as a primitive value). This is no longer the case for the new built-in this.getOptions method, which uses native querystring parsing (ships with Node.js). It is still possible to add custom behavior for these cases in the Loader’s code after getting the options by using this.getOptions method.
              • Schema argument is optional for the new this.getOptions method, but we strongly advise to add schema validation for your Loader’s options. The title field in the schema, can be used to customize the validation error message e.g. «title»: «My Loader ooooptions» will result in displaying errors this way: Invalid ooooptions object. My Loader has been initialised using an ooooptions object that does not match the API schema. — ooooptions.foo.bar.baz should be a string.

              Настройка Webpack 5 с нуля

              

              Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

              • команда «webpack-dev-server» теперь выглядит как «webpack-serve»
              • отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
              • полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и < stream: «stream-browserify» >в качестве алиаса в настройки вебпака

              Что такое вебпак?

              По большей части, сайты больше не пишутся на чистом HTML с небольшим количеством JavaScript — часто они создаются только с помощью JavaScript. Поэтому возникает необходимость в сборке, минификации и транспиляции кода. Вот где вебпак приходит на помощь.

              Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

              Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

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

              Установка

              Создаем директорию проекта и инициализируем его:

              mkdir webpack-tutorial cd !$ // или cd webpack-tutorial yarn init -yp // создает стандартный приватный файл "package.json" // или npm init -y 

              Устанавливаем webpack и webpack-cli в качестве зависимостей для разработки:

              yarn add -D webpack webpack-cli // или npm i -D webpack webpack-cli 

              • webpack — сборщик модулей и ресурсов
              • webpack-cli — интерфейс командной строки для вебпака

              console.log("Как интересно!") 

              Отлично, у нас имеется Node.js-проект с установленными основными пакетами и файл «index.js». Займемся настройкой вебпака.

              Базовая настройка

              Приступим к настройке сборщика. Создаем файл «webpack.config.js» в корневой директории проекта.

              Точка входа

              Прежде всего, необходимо определить точку входа приложения, т.е. то, какие файлы вебпак будет компилировать. В приведенном примере мы определяем точку входа как «src/index.js»:

              // webpack.config.js const path = require('path') module.exports = < entry: < main: path.resolve(__dirname, './src/index.js'), >, > 

              Точка выхода

              Точка выхода — это директория, в которую помещаются скомпилированные вебпаком файлы. Установим точку выхода как «dist». Префикс «[name]» соответствует названию файла в src:

              // webpack.config.js module.exports = < // . output: < path: path.resolve(__dirname, './dist'), filename: '[name].bundle.js', >, > 

              Минимальная настройка для сборки проекта готова. Добавляем скрипт «build» в файл «package.json», запускающий команду «webpack»:

              // package.json "scripts":

              yarn build // или npm run build 

              asset main.bundle.js 19 bytes [emitted] [minimized] (name: main) ./src/index.js 18 bytes [built] [code generated] webpack 5.1.0 compiled successfully in 152 mss 

              В директории «dist» создается файл «index.bundle.js». Файл не изменился, но мы успешно осуществили сборку проекта.

              Плагины

              Интерфейс плагинов делает вебпак очень гибким. Плагины используются как самим вебпаком, так и сторонними расширениями. Некоторые плагины используются почти в каждом проекте.

              Плагин создания HTML на основе шаблона

              У нас есть готовая сборка, но она бесполезна без разметки, которая загрузит сборку в качестве скрипта. Поскольку мы хотим, чтобы такой HTML-файл генерировался автоматически, используем html-webpack-plugin.

              • html-webpack-plugin — создает HTML-файл на основе шаблона

              yarn add -D html-webpack-plugin 

              Создаем файл «template.html» в директории «src». Мы можем добавить в шаблон переменные и другую информацию. Добавим переменную «title», в остальном шаблон будет выглядеть как обычный HTML-файл с контейнером с идентификатором «root»:

              Добавляем в настройки вебпака свойство «plugins», где определяем плагин, название выходного файла (index.html) и шаблон:

              // webpack.config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = < // . plugins: [ new HtmlWebpackPlugin(< title: 'webpack Boilerplate', template: path.resolve(__dirname, './src/template.html'), // шаблон filename: 'index.html', // название выходного файла >), ], > 

              Запускаем сборку. Директория «dist» теперь содержит файл «index.html» с подключенным в нем скриптом. Круто! Если вы откроете этот файл в браузере, то увидите сообщение «Как интересно!» в консоли.

              Добавим немного контента в DOM. Изменим содержимое файла «index.js» и перезапустим сборку.

              // index.js // создаем элемент заголовка const heading = document.createElement('h1') heading.textContent = 'Как интересно!' // добавляем заголовок в DOM const root = document.querySelector('#root') root.append(heading) 

              Перейдите в директорию «dist» и запустите сервер (для этого необходимо глобально установить http-server: yarn global add http-server или npm i -g http-server).

              http-server 

              В открывшейся вкладке браузера вы должны увидеть заголовок, гласящий «Как интересно!». Также обратите внимание на уменьшение размера файла.

              Очистка

              Установим clean-webpack-plugin, очищающий директорию «dist» при каждой сборке проекта. Это позволяет автоматически удалять старые файлы, ставшие ненужными.

              • clean-webpack-plugin — удаляет/очищает директорию сборки проекта

              // webpack.config.js const HtmlWebpackPlugin = require('html=webpack-plugin') const < CleanWebpackPlugin >= require('clean-webpack-plugin') module.exports = < // . plugins: [ // . new CleanWebpackPlugin(), ], >

              Модули и загрузчики

              Вебпак использует загрузчики для разбора файлов, загружаемых с помощью модулей. Это могут быть JavaScript-файлы, статические ресурсы, такие как изображения или стили и компиляторы, такие как TypeScript и Babel. Вебпак 5 имеет несколько встроенных загрузчиков ресурсов.

              В нашем проекте имеется HTML-файл, который загружает некоторый скрипт, но больше он ничего не делает. Давайте подумаем, чего мы хотим от сборщика?

              • Компиляция новейших возможностей JavaScript в код, совместимый со всеми или большинством браузеров
              • Импорт стилей и преобразование SCSS в CSS
              • Импорт изображений и шрифтов
              • Настройка React или Vue (опционально)

              Babel (JavaScript)

              Babel — это инструмент, позволящий использовать будущий JavaScript сегодня.

              Мы собираемся определить правило, согласно которому все файлы с расширением «js» в проекте (кроме файлов, содержащихся в директории «node_modules») будут транспилироваться с помощью babel-loader. Для работы Babel требуется несколько зависимостей:

              • babel-loader — транспиляция файлов с помощью Babel и вебпака
              • @babel/core — транспиляция ES2015+ в обратно совместимый JavaScript
              • @babel/preset-env — полезные стандартные настройки Babel
              • @babel/plugin-proposal-class-properties — пример кастомной конфигурации Babel (установка свойств экземпляров в теле класса, а не в его конструкторе)

              yarn add -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties 

              // webpack.config.js module.exports = < // . module: < rules: [ // JavaScript < test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'], >, ], > > 

              Если вы настраиваете TypeScript-проект, то вместо babel-loader следует использовать typescript-loader для всех JavaScript-файлов, нуждающихся в транспиляции. Вы проверяете файлы с расширением «ts» и используете ts-loader.

              Итак, Babel настроен, но плагин еще нет. Вы можете убедиться в этом, добавив следующий код в начало index.js:

              // index.js // создание свойства класса без конструктора class Game < name = 'Violin Charades' >const myGame = new Game() // создаем параграф const p = document.createElement('p') p.textContent = `I like $.` // создаем элемент заголовка const heading = document.createElement('h1') heading.textContent = 'Как интересно!' // добавляем параграф и заголовок в DOM const root = document.querySelector('#root') root.append(heading, p) 

              ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/you/webpack-tutorial/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (3:8): 1 | // Create a class property without a constructor 2 | class Game < >3 | name = 'Violin Charades' | ^ 4 | > 

              Для того, чтобы это исправить, создаем файл «.babelrc» в корне проекта:

              // .babelrc < "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-proposal-class-properties"] >

              Запускаем сборку с помощью yarn build. Теперь все работает.

              Изображения

              Мы хотим импортировать изображения в JavaScript-файл, но JavaScript не умеет этого делать. Чтобы убедиться в этом, создаем директорию «src/images», помещаем туда изображение и пытаемся импортировать его в файле «index.js»:

              // index.js import example from './images/example.png' // . 

              При запуске сборки будет выброшено исключение:

              ERROR in ./src/images/example.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 

              Как отмечалось ранее, вебпак обладает некоторыми встроенными загрузчиками для работы со статическими файлами. Для изображений следует использовать тип «asset/resource». Обратите внимание, что речь идет именно о типе (type), а не о загрузчике (loader):

              // webpack.config.js module.exports = < // . module: < rules: [ // изображения < test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', >, ], >, > 

              В директории «dist» появляется новый файл.

              Шрифты и другие встраиваемые данные

              Вебпак также имеет встроенный модуль для обработки некоторых встраеваемых данных, таких как шрифты и SVG. Для этого достаточно указать тип «asset/inline»:

              // index.js import example from './images/example.svg' // . 

              // webpack.config.js module.exports = < // . module: < rules: [ // шрифты и SVG < test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', >, ], >, > 

              Стили

              Использование загрузчиков стилей является необходимым условием использования строк наподобие «import ‘file.css’» в скрипте.

              Многие люди используют CSS-in-JS, стилизованные компоненты (styled components) и другие инструменты, позволяющие использовать стили в JavaScript.

              Порой мы можем ограничиться загрузкой одного CSS-файла. Но, возможно, вы хотите использовать PostCSS, позволяющий использовать последние возможности CSS в браузере. Или вы хотите использовать препроцессор Sass.

              Я хочу использовать все три — писать код на Sass, обрабатывать его с помощью PostCSS и компилировать в CSS.

              • sass-loader — загружает SCSS и компилирует его в CSS
              • node-sass — Node Sass
              • postcss-loader — обработка CSS с помощью PostCSS
              • postcss-preset-env — полезные настройки PostCSS
              • css-loader — загрузка стилей
              • style-loader — применение стилей к элементам DOM

              yarn add -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass 

              Как и для Babel, для PostCSS требуется отдельный файл настроек:

              // postcss.config.js module.exports = < plugins: < 'postcss-preset-env': < browsers: 'last 2 versions', >, >, > 

              Для проверки работоспособности названных инструментов создадим файл «src/styles/main.scss», содержащий переменные Sass и пример использования PostCSS (lch):

              // src/styles/main.css $font-size: 1rem; $font-color: lch(53 105 40); html

              Импортируем этот файл в index.js и добавляем 4 загрузчика. Загрузчики используются вебпаком справа налево, так что последним должен быть sass-loader, затем PostCSS, затем CSS и, наконец, style-loader, который применяет скомпилированные стили к элементам DOM:

              // index.js import './styles/main.css' // . 

              // webpack.config.js module.exports = < // . module: < rules: [ // CSS, PostCSS, Sass < test: /\.(scss|css)$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], >, ], >, > 

              После сборки вы заметите, что Sass и PostCSS применились к DOM.

              Обратите внимание, что мы установили настройки для режима разработки. Для продакшна следует использовать MiniCssExtractPlugin вместо style-loader, который экспортирует минифицированный CSS.

              Разработка

              Каждый раз набирать команду yarn build (npm run build) при необходимости повторной сборки проекта может быть утомительным. Чем больше проект, тем дольше он будет собираться. Поэтому необходимо иметь два файла настроек вебпака:

              • Настройки для продакшна, включающие минификацию, оптимизацию и удаление всех карт ресурсов (source maps)
              • Настройки для разработки, включая запуск сервера, обновление при каждом изменении и карты ресурсов

              Для этого необходимо установить webpack-dev-server.

              • webpack-dev-server — это сервер для разработки

              yarn add -D webpack-dev-server 

              В целях демонстрации принципов использования сервера для разработки мы можем определить соответствующие настройки в файле «webpack.config.js». На практике лучше иметь два файла настроек: один с mode: production и другой с mode: development. В специально подготовленной для вас webpack 5 boilerplate я использую webpack-merge для получения базовых настроек в виде одного файла, а специальные требования содержатся в файлах «webpack.prod.js» и «webpack.dev.js».

              // webpack.config.js const webpack = require('webpack') module.exports = < // . mode: 'development', devServer: < historyApiFallback: true, contentBase: path.resolve(__dirname, './dist'), open: true, compress: true, hot: true, port: 8080, >, plugins: [ // . // применять изменения только при горячей перезагрузке new webpack.HotModuleReplacementPlugin(), ], > 

              Мы добавили mode: development и свойство «devServer». В данном свойстве содержится несколько стандартных настроек — номер порта (8080), автоматическое открытие браузера, использование hot-module-replacement, для которого нужен webpack.HotModuleReplacement(). Это позволит модулям обновляться без полной перезагрузки страницы, т.е. если изменятся отдельные стили, только они будут обновлены, вам не потребуется перезагружать JavaScript, что очень сильно ускоряет разработку.

              Для запуска сервера используется команда «webpack serve»:

              // package.json "scripts":

              yarn start 

              После запуска этой команды браузер откроется по адресу localhost:8080. Теперь вы можете изменять Sass и JavaScript и они будут обновляться на лету.

              Заключение

              Надеюсь, данная статья помогла вам начать знакомство с вебпаком. Для облегчения решения ваших повседневных задач мной разработан webpack 5 boilerplate с Babel, Sass, PostCss, оптимизацией для продакшна и сервером для разработки. Взяв его за основу, вы легко сможете настроить вебпак для работы с React, Vue или TypeScript.

              • Веб-разработка
              • JavaScript
              • Программирование

              Как настроить автоматическое обновление страницы при изменении содержимого

              Узнайте, как настроить автоматическое обновление страницы при изменении содержимого с помощью Live Server, BrowserSync и Webpack Dev Server.

              

              Алексей Кодов
              Автор статьи
              23 июня 2023 в 15:28

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

              Использование Live Server

              Live Server — это расширение для Visual Studio Code, которое автоматически обновляет страницу при изменении файлов проекта. Для использования Live Server следуйте инструкции ниже:

              1. Установите Visual Studio Code (если еще не установлен).
              2. Зайдите в раздел «Extensions» (иконка с блоками на боковой панели) и найдите «Live Server» в поиске ��️.
              3. Установите расширение, нажав на кнопку «Install».
              4. Откройте свой проект в Visual Studio Code и нажмите правой кнопкой мыши на HTML-файле, затем выберите «Open with Live Server» ��.

              Теперь при изменении и сохранении файлов проекта, страница будет автоматически обновляться.

              Python-разработчик: новая работа через 9 месяцев
              Получится, даже если у вас нет опыта в IT

              

              Использование BrowserSync

              BrowserSync — это инструмент, который также позволяет автоматически обновлять страницу при изменении файлов проекта. Он может быть установлен через npm (Node.js package manager). Следуйте инструкции ниже для настройки BrowserSync:

              1. Установите Node.js (если еще не установлен).
              2. Откройте терминал и выполните команду npm install -g browser-sync для глобальной установки BrowserSync ��.
              3. Перейдите в папку с вашим проектом с помощью команды cd your_project_directory .
              4. Запустите BrowserSync с помощью команды browser-sync start —server —files «**/*.html, **/*.css, **/*.js» .

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

              Использование Webpack Dev Server

              Если вы используете Webpack для сборки вашего проекта, вы также можете использовать Webpack Dev Server для автоматического обновления страницы. Следуйте инструкции ниже для настройки Webpack Dev Server:

              1. Установите Webpack Dev Server с помощью команды npm install webpack-dev-server —save-dev ✨.
              2. Откройте файл webpack.config.js и добавьте следующий код в объект module.exports :

              devServer: < contentBase: path.join(__dirname, 'public'), watchContentBase: true, open: true, >,

              1. В файле package.json измените скрипт «start» на webpack-dev-server —mode development .

              Теперь при выполнении команды npm start ваш проект будет доступен на локальном сервере, и страница будет автоматически обновляться при изменении файлов.

              В заключение, существует несколько способов настроить автоматическое обновление страницы при изменении содержимого. Выбирайте тот, который лучше всего подходит для вашего проекта и предпочтений разработки. Удачного кодинга! ��

              Похожие публикации:

              1. Как вернуть число из функции c
              2. Как транспонировать dataframe pandas
              3. Программирование в продажах что это
              4. Самая большая длина волны у какого излучения