Ссылки
[Link]
[Link]
[Link]
___________________________________________________________________________________
__
Последовательность действий
1) Создаем начальные фйалы [Link], [Link], [Link]
2) npm init
3) npm install -D webpack webpack-cli
4) Создаем в корне проекта файл [Link] содержащий
const path = require('path')
[Link] = {
mode: 'development', //конфигурация общего файла js не минифицирована и
читабельнаю Если это поле убрать , то как для продакшена
entry: './src/js/[Link]',
output: {
filename: '[Link]',
path: [Link](__dirname, 'dist')
}
}
Усди у нас есть две или более точки входа скриптов, то подключаем следующим образом
const path = require('path')
[Link] = {
mode: 'development',
entry: {
main: './src/js/[Link]',
analytics: './src/js/[Link]',
},
output: {
filename: '[name].[Link]',
path: [Link](__dirname, 'dist')
}
}
Добавление уникального hash в имя создаваемого файла
const path = require('path')
[Link] = {
mode: 'development',
entry: './src/js/[Link]',
output: {
filename: '[name].[contenthash].js',
path: [Link](__dirname, 'dist')
}
}
5) Запуск сборки командой webpack
6) Устанавливаем плагин (позволяет взаимодействовать с html, удаляет дубликаты
файлов от пересборки
(поле template. Если есть параметр template, то поле title в plugins не работает)
npm install -D html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin')
[Link] = {
mode: 'development',
entry: './src/js/[Link]',
output: {
filename: '[name].[contenthash].js',
path: [Link](__dirname, 'dist')
},
plugins: [
new HTMLWebpackPlugin({
title: 'Loft mebel',
template: './src/[Link]'
})
]
}
7) Очищаем папку сборки
npm install -D clean-webpack-plugin
(добавляем подключение const {CleanWebpackPlugin} = require('clean-webpack-plugin')
), в итоге:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
[Link] = {
mode: 'development',
entry: './src/js/[Link]',
output: {
filename: '[name].[contenthash].js',
path: [Link](__dirname, 'dist')
},
plugins: [
new HTMLWebpackPlugin({
template: './src/[Link]'
}),
new CleanWebpackPlugin()
]
}
8) Запуск в режиме разработки и продакшн (командная строка: npm run
dev /или/ npm run build) :
в файле [Link] добавляем следующее:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
9)В [Link] = {
context: [Link](__dirname, 'src'),...
добавляем context - указатель на папку с исходниками. Исправляем пути в entry и
template
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
[Link] = {
context: [Link](__dirname, 'src'),
mode: 'development',
entry: './js/[Link]', //'./[Link]'
output: {
filename: '[name].[contenthash].js',
path: [Link](__dirname, 'dist')
},
plugins: [
new HTMLWebpackPlugin({
template: './[Link]'
}),
new CleanWebpackPlugin()
]
}
___________________________________________________________________________________
_____________________
Loader - позволяет работать webpack с другими типами данных (css, png, jpeg, react,
библиотеками...)
Порядок записи лоудеров в графе use ВАЖЕН!!!! Читаются они справа-налево!!!!!!
___________________________________________________________________________________
_____________________
РАБОТА Со СТИЛЯМИ
10) В файл [Link] добавляем import '../css/[Link]'
11) В файлу [Link] добавляем лоудеры:
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
устанавливаем:
npm i -D style-loader css-loader
___________________________________________________________________________________
_____________________
JSON подключение
___________
в файле [Link]: import json from './путь/' Файл можно указывать без расширения
___________________________________________________________________________________
_____________________
JPEG PNG
12) Устанавливаем npm install -D file-loader //это до webpack4 включительно. В
webpack5 через модули
13) Устанавливаем CopyWebpackPlugin npm install copy-webpack-plugin --save-dev
Это для копирования директории с картинками в сборку. Никакие импорты картинок в
файл [Link] не нужны
14) Устанавливаем MiniCssExtractPlugin npm install --save-dev mini-css-extract-
plugin.
(этот плагин выносит все стили из head [Link] в отдельный файл стилей при
сборке)
Удаляем из правил style-loader и дописываем [Link] (эти два
лоудера конфликтуют между собой)
Итоговый файл [Link]:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
[Link] = {
context: [Link](__dirname, 'src'),
mode: 'development',
entry: './js/[Link]',
output: {
filename: '[name].[contenthash].js',
path: [Link](__dirname, 'dist'),
// assetModuleFilename: 'img/[name][ext]'
//assetModuleFilename: 'assets/images/[name][ext]'
},
plugins: [
new HTMLWebpackPlugin({
template: './[Link]'
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: [Link](__dirname, 'src/img'),
to: [Link](__dirname, 'dist/img')
}
]
}),
new MiniCssExtractPlugin({
filename: 'css/[Link]'
})
]
,
module: {
rules: [
{
test: /\.css$/,
use: [[Link], 'css-loader']
},
{
test: /\.(png|jpg|svg|gif)$/i,
type: 'asset/resource'
//или
// use: ['file-loader']
//или
// use: [
// {
// loader: 'file-loader',
// // options: {
// // limit: 8192,
// // }
// },
// ],
// type: 'javascript/auto'
},
]
}
}
___________________________________________________________________________________
_____________________
Favicon добавление
___________
в файле [Link] добавить <link rel="icon" href="[Link]" type="image/ico">
___________________________________________________________________________________
_____________________
ШРИФТЫ
15) Шрифты по ссылкам <link href....> работают
16) Файлы шрифтов (видео 1ч10мин):
В файл [Link] добавляем
@font-face {
font-family: 'Rampart One', cursive;
src: url('../fonts/[Link]') format("truetype");
}
В файл [Link] добавляем:
{
test: /\.(ttf|woff|woff2|eot)$/i,
use: ['file-loader']
},
___________________________________________________________________________________
_____________________
[Link] добавление
___________
Устанавливаем npm install [Link]
В файл [Link] добавляем
@import "~[Link]"
___________________________________________________________________________________
_____________________
___________________________________________________________________________________
_____________________
В файле [Link]
меняем поле "main": "[Link]" на
"private": "true",
___________________________________________________________________________________
_____________________
Функции (простые функции не работают при сборке). Необходимо:
Пример:
<div class="foo" onclick="bar()">...</div>
Необходимо:
1) export default function bar(){...}; или
2) [Link] = function(){...}; или
3) function bar(){...};
[Link] = bar;
Мне помог варант 3
___________________________________________________________________________________
_____________________
Библиотека jquery
Если одна точка входа, то npm install -S... и @import в [Link]
Если две точки входа и более, к которым нужна эта библиотека, то добавдяем
optimization: {
splitChunks: {
chunks: 'all'
}
}
___________________________________________________________________________________
_____________________
17) npm install -D webpack-dev-server автоматическое обновление окна браузера при
изменениях
в раздел [Link] файла [Link] добавляем
devServer: {
port: 4200,
open: true
},
Затем в файле [Link] добавляем в scripts запись
"start": "webpack serve"
18) Оптимизация(минифицирование) файлов html и css
Создаем переменные
const isDev = [Link].NODE_ENV === 'develpment' //(без буквы О!!!!!!!)
const isProd = !isDev
set NODE_ENV=develpment //(без буквы О!!!!!!!) - задать значение переменной в
консоли
Устанавливаем npm i -D cross-env
В файле [Link] добавляем в scripts запись
"scripts": {
"dev": "cross-env NODE_ENV=develpment webpack --mode development",
"build": "cross-env NODE_ENV=production webpack --mode production",
"start": "cross-env NODE_ENV=develpment webpack serve"
В файле [Link] добавляем поле minify
new HTMLWebpackPlugin({
template: './[Link]',
minify: {
collapseWhitespace: isProd
}
}),
файлs .html минифицированы.
Переходим к .css
Устанавливаем
npm install terser-webpack-plugin --save-dev
npm install css-minimizer-webpack-plugin --save-dev
В файле [Link] добавляем
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin")
функцию optimization и новое поле optimization в [Link]
Итоговый файл [Link]
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin")
const isDev = [Link].NODE_ENV === 'develpment'
const isProd = !isDev
const optimization = () => {
// const config = {
// splitChunks: {
// chunks: 'all'
// }
// }
let config={}
if (isProd) {
[Link] = [
new CssMinimizerPlugin(),
new TerserPlugin()
]
}
return config
}
[Link] = {
context: [Link](__dirname, 'src'),
mode: 'development',
entry: './js/[Link]',
output: {
filename: 'js/[name].[contenthash].js',
path: [Link](__dirname, 'dist'),
// assetModuleFilename: 'img/[name][ext]'
//assetModuleFilename: 'assets/images/[name][ext]'
},
devServer: {
port: 4200,
open: true
},
optimization: optimization(),
plugins: [
new HTMLWebpackPlugin({
template: './[Link]',
minify: {
collapseWhitespace: isProd
}
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: [Link](__dirname, 'src/img'),
to: [Link](__dirname, 'dist/img')
}
]
}),
new MiniCssExtractPlugin({
filename: 'css/[Link]'
// filename: 'css/[name].[contenthash].css'
})
]
,
module: {
rules: [
{
test: /\.css$/,
use: [[Link], 'css-loader']
},
// {
// test: /\.css$/,
// use: [
// {
// loader: [Link],
// options: {
// hmr: isDev,
// reloadAll: true
// }
// }, 'css-loader']
// },
{
test: /\.(png|jpg|svg|ico|gif)$/i,
type: 'asset/resource'
//или
// use: ['file-loader']
//или
// use: [
// {
// loader: 'file-loader',
// // options: {
// // limit: 8192,
// // }
// },
// ],
// type: 'javascript/auto'
},
]
}
}
___________________________________________________________________________________
_____________________
19) Препроцессоры
19.1) LESS
утанавливаем
npm install less less-loader --save-dev
npm i -D less
В файле [Link] добавляем import '../css/[Link]'
Создаем правило
module: {
rules: [
{
test: /\.less$/,
use: [[Link], 'css-loader', 'less-loader']
},
19.2) SASS
npm install sass-loader sass webpack --save-dev
В файле [Link] добавляем import '../css/[Link]'
Создаем правило
module: {
rules: [
{
test: /\.s[ac]ss$/i,
//test: /\.(sass|scss)$/,
use: [[Link], 'css-loader', 'sass-loader']
},
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin")
const isDev = [Link].NODE_ENV === 'develpment'
const isProd = !isDev
const optimization = () => {
const config = {
splitChunks: {
chunks: 'all'
}
}
// let config={}
if (isProd) {
[Link] = [
new CssMinimizerPlugin(),
new TerserPlugin()
]
}
return config
}
const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`
[Link] = {
context: [Link](__dirname, 'src'),
mode: 'development',
entry: './js/[Link]',
output: {
// filename: 'js/[name].[hash].js',
filename: `js/${filename("js")}`,
path: [Link](__dirname, 'dist'),
// assetModuleFilename: 'img/[name][ext]'
//assetModuleFilename: 'assets/images/[name][ext]'
},
devServer: {
port: 4200,
open: true
},
optimization: optimization(),
plugins: [
new HTMLWebpackPlugin({
template: './[Link]',
minify: {
collapseWhitespace: isProd
}
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: [Link](__dirname, 'src/img'),
to: [Link](__dirname, 'dist/img')
}
]
}),
new MiniCssExtractPlugin({
// filename: 'css/[Link]'
filename: `css/${filename("css")}`
})
]
,
module: {
rules: [
{
test: /\.css$/,
use: [[Link], 'css-loader']
},
// {
// test: /\.css$/,
// use: [
// {
// loader: [Link],
// options: {
// hmr: isDev,
// reloadAll: true
// }
// }, 'css-loader']
// },
{
test: /\.less$/,
use: [[Link], 'css-loader', 'less-loader']
},
{
test: /\.s[ac]ss$/i,
use: [[Link], 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|svg|ico|gif)$/i,
type: 'asset/resource'
//или
// use: ['file-loader']
//или
// use: [
// {
// loader: 'file-loader',
// // options: {
// // limit: 8192,
// // }
// },
// ],
// type: 'javascript/auto'
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
___________________________________________________________________________________
_____________________
20) Babel
Идем на сайт
[Link]
Устанавливаем
npm install --save-dev babel-loader @babel/core
npm install --save-dev @babel/preset-env
Добавляем правило
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
В файл [Link] добавляем
"browserslist": "> 0.25%, not dead"
Устанавливаем
npm install --save @babel/polyfill
В [Link] меняем
entry: {
main:['@babel/polyfill', './js/[Link]']
},
Плагины для babel:
устанавливаем через npm
добавляем
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
___________________________________________________________________________________
_____________________
21) TypeScript
Устанавливаем npm install --save-dev @babel/preset-typescript
добавляем
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env', '@babel/preset-typescript'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
___________________________________________________________________________________
_____________________
22) React
Устанавливаем
npm install --save-dev @babel/preset-react
npm i react react-dom
добавляем
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
___________________________________________________________________________________
_____________________
23) Eslint
___________________________________________________________________________________
_____________________
[Link]
armer2001
8 месяцев назад
Владлен, спасибо за материал. Очень помогло в изучении webpack. Сегодня проработал
с учетом Webpack 5 и изменений в плагинах.
Форкнул вашу сборку и ввел изменения.
Вот что получилось в результате: [Link]
Изменение типа ковычек
Settings → Editor → Code style → (язык, в вашем случае typescript) → Punctuation →
Use [single] quotes [in new code].