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