Webpack – сборщик, который предназначен для того, чтобы собирать множество наших скриптов, css, html в финальный билд, как-то это дело оптимизировать. Ускоряет разработку, помогает лучше структурировать код, благодаря возможности разбирать его на модули. Нативность модуленй не везде поддерживается и есь минусы, вебпак решает это Webpack использует React, Angulae, Vue 1. Для создания проекта ввести в терминале: npm init –y В пустом проекте появится файл package.json { "name": "webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } } Можно удалить version, description, main, test. Пока они не нужны { "name": "webpack", "scripts": { } } 2. Теперь установим Webpack В терминале пропишем команду: npm install --save-dev webpack webpack-cli В файле package.json добавится: { "name": "webpack", "scripts": { }, "devDependencies": { "webpack": "^5.79.0", "webpack-cli": "^5.0.1" } } 3. Затем созданим файл webpack.config.js С официального сайта можно взять заготовку: const path = require('path'); //стандартный модуль, который нужен, чтобы вне зависимости от платформы работать с путями, windows - обратные слеши, linux - прямые слеши module.exports = { entry: './src/index.js', // точка входа в приложение output: { // куда будем билдить готовый проект path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, }; 4. Создадим папку (точку входа в приложение) src/index.js 5. В index.js напишем console.log('Hello world'); 6. Экспортироваться будет в папку dist, которой ещё нет. Она будет создана автоматически 7. Чтобы проверить и запустить свою сбоку webpack переходим в package.json и в scripts пропишем "build": "webpack" { "name": "webpack", "scripts": { "build": "webpack" }, "devDependencies": { "webpack": "^5.79.0", "webpack-cli": "^5.0.1" } } 8. В терминале пропишем npm run build Это минимальные требования для запуска webpack. Но это бестолково. Принимает только ES5 синтаксис и не умеет работать с css, html и со всем остальным. Для решения таких вопрос есть плагины и лоадеры. Для любого формата файлов нужны свои лоадеры. Вместе с некоторыми лоадерами используются ещё и плагины, которые имеют больше возможностей по настройке и предоставляет более богатый инструментарий. 9. Добавим файл .editorconfig root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf trim_trailing_whitespace = true insert_final_newline = true [*.{js,ts}] quote_type = single [*.md] trim_trailing_whitespace = false [*.json] insert_final_newline = false 10. Добавим файл .gitignore *.*~ .vscode .vs .idea # User-specific files *.suo *.user *.userosscache *.sln.docstates # Logs logs *.log npm-debug.log* # Dependency directories node_modules/ # TypeScript cache *.tsbuildinfo # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Build results dist Для того, чтобы работать с современным наследованием синтаксисом JavaScript ES6 и выше используется специальный лоадер babel, который собственно транслирует современный JS в более старые версии для того, чтобы поддерживался код большим количеством браузеров В следующих проектах нужно будет использовать TypeScript,поэтому будем рассматривать TypeScript Для того, чтобы добавить TS в проект прописываем команду: npm i -D typescript ts-loader Примечание: i – сокращённо install -D – сокращённо save-dev Рекомендуется установить typescript глобально и установить системную переменную path путь до компилятора папки typescript, чтобы в консоли работала команда typescript - tsc надо прописать npm i -g typescript Теперь в терминале попробуем ввести tsc –v Если появится такая вот ошибка: нужно нажать правой кнопкой мыши по значку ПУСК и выбрать Windows PowerShell (администратор) В открывшемся окне ввести следующую команду: Set-ExecutionPolicy Unrestricted -Scope CurrentUser Потом ввести Y Теперь пробуем заново в терминале повторить команду tsc -v и видим что всё заработало! Для того, чтобы подключить typescript понадобится в webpack.config.js добавить модули const path = require('path'); //стандартный модуль node нужен, чтобы вне зависимости от платформы работать с путями, windows - обратные слеши, linux - прямые слеши module.exports = { entry: './src/index.js', // точка входа в приложение output: { // куда будем билдить готовый проект path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ //массив правил { test: /\.[tj]s$/, //обычное регулярное выражение, которое говорит какие файлы нужно обрабатывать данным лоадером (ts либо js) ( то есть в регулярке t или j ) use: 'ts-loader', exclude: /node_modules/, }, ] }, resolve: { extensions: ['.ts', '.js']//массив - какие расширения файлов необязательно будет указывать при import или export } }; extensions позволит делать такие вещи: переходим в src создадим ещё один файл test.js export function test(){ console.log('Hello world'); } затем в index.js import { test } from './test' test(); То есть не нужно нам явно в index.js указывать test.ts либо test.js Это минимальные настройки, чтобы подключить TypeScript, но недостаточные на самом деле, потому что нужен ещё файл ts.config, который настраивает компилятор TypeScript Есть очень удобный и простой способ создать этот файл – команда: tsc --init Если typescript не установлен глобально, то использовать команду npx tsc –init Рассмотрим файл tsconfig.json “target” : “es5” – в какую версию скрипта нужно транслировать typescript после “strict”: true, стоит включить настройку “noImplicitAny’: true, также "rootDir": "./src", прописываем папку к нашим исходникам "module": "commonjs", "rootDir": "./src", В папке src заменим js на ts, а также в weback.config.js изменим index.js на index.ts и соберём проект npm run build Теперь добавим html плагин – плагин, который позволяет работать с html, генерирует index.html либо использует для этого шаблоны либо стандартно используем команду: npm i -D html-webpack-plugin Теперь нам нужно его подключить: идём в webpack.config.js и добавляем после path: const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); //стандартный модуль node нужен, чтобы вне зависимости от платформы работать с путями, windows - обратные слеши, linux - прямые слеши const HtmlWebpackPlugin = require('html-webpack-plugin'); в конце добавляем поле plugins (массив, в котором будут перечислены все плагины, которые буду добавлены в проекте) resolve: { extensions: ['.ts', '.js']//массив - какие расширения файлов необязательно будет указывать при import или export }, plugins: [ new HtmlWebpackPlugin({ title: 'Demo webpack' //title, который будет в заголовке html файла }), ], если же index.html нужен не пустой, а с какой-то заготовленной версткой, то можно создать его отдельно в любой папке и указать к нему путь, в качестве template plugins: [ new HtmlWebpackPlugin({ //title: 'Demo webpack' //title, который будет в заголовке html файла template: '.src/index.html' }), ], тогда он возьмёт за основу существующий файл Работа с ассетами. Переходим в webpack.config.js и добавляем в rules