Konfiguracja Webpack 5 na potrzeby zmodyfikowania plików CSS będących zasobem motywu WordPress

W celu naprawy wyglądu strony internetowej, dla przeorganizowania projektu, opartego na bazie CMS WordPress posiadającego pliki Sass, a także tylko pojedynczy plik wynikowy z rozszerzeniem .js, a tym samym nie posiadający zminifikowanego osobnego pliku CSS, bez zaplecza narzędzi, np. preprocesora CSS, które mogłyby w trakcie naprawy, bądź przebudowy strony posłużyć do kompilacji plików Sass na CSS posłużymy się module bundler Webpack 5 czyli pakietem modułów łączącym, przekształcającym, pakującym moduły najczęściej w jeden plik lub zestaw plików wynikowych pakietu JavaScript gotowych do umieszczenia w aplikacji, na stronie internetowej.

Aby rozpocząć pracę z narzędziem Webpack 5 należy zainstalować Node.js (środowisko uruchomieniowo-wykonacze JavaScript) z automatycznie instalowanym npm (pozwalającym instalować i odinstalowywać pakiety i ich zależności – loadery, pluginy). Webpack parsuje (analizuje) kod plików wejściowych (ang. Entry Points) zawartych w pliku konfiguracyjnym webpack.config.js i buduje wykres zależności na podstawie pliku package.json. W ten sposób automatyzuje, optymalizuje zadania np. kompilując Sass do CSS, transpilując ES6+ do ES5 zrozumiałego dla przeglądarek, itd. Ma też na celu tworząc jeden plik wynikowy ograniczenie liczby żądań podczas ładowania kodu co poprawia wydajności takiej strony, aplikacji internetowej. W Node.js każdy plik jest traktowany jako osobny moduł. Node.js obsługuje dwa systemy modułów: moduły CommonJS i moduły ECMAScript, czyli zestaw standardów używanych do implementacji modułów JavaScript.
– Standard ECMAScript Modules poprzez użycie instrukcji import i export.
– Standard CommonJS modules poprzez funkcje require() i module.exports, nie obsługujący przeglądarek internetowych, głównie używany z Node w aplikacjach JavaScript po stronie serwera.

Instalacja Node.js:

https://nodejs.org/en > Download for Windows (x64) 18.16.0 LTS Recommended For Most Users
Pobieramy a następnie instalujemy plik node-v18.16.0-x64.msi.
Sprawdzamy zainstalowane wersje poprzez:
cmd (Wiersz polecenia Windows) / Git Bash Here (Powłoka terminalowa dla Windows,
zapewnia warstwę emulacji dla obsługi wiersza poleceń Git):
node -v //v18.16.0
npm -v //9.5.1

W tym projekcie zostaną wykorzystane:

webpack webpack-cli
sass sass-loader style-loader css-loader
mini-css-extract-plugin
postcss-loader postcss autoprefixer
css-minimizer-webpack-plugin

Natomiast końcowa struktura plików i katalogów projektu, która następnie posłuży do naprawy, przebudowy css będzie wyglądać następująco:

simple-starter-webpack-wp

/main.scss

/index.js
/package.json
/package-lock.json
/webpack.config.js
/webpack.config.prod.js

index_webpack.html

cd simple-starter-webpack-wp # przejście do katalogu
pwd # sprawdzenie ścieżki /simple-starter-webpack-wp
code . # otwarcie projektu w edytorze VSCode                                                VSCode > Terminal > New Terminal # otwarcie terminala bezpośrednio w VSCode         
touch index_webpack.html # utworzenie pliku

Do nowo utworzonego pliku index_webpack.html wprowadzamy:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Starter Webpack 5 for WordPress</title>
</head>
<body>
    <h1>Webpack 5 for WordPress configuration</h1>
    <h2>webpack webpack-cli</h2>
    <h3>sass sass-loader style-loader css-loader</h3>
    <h4>mini-css-extract-plugin</h4>
    <h5>postcss-loader postcss autoprefixer</h5>
    <h6>css-minimizer-webpack-plugin</h6>
</body>
</html>

mkdir webpack  # utworzenie katalogu
cd webpack  # przejście do katalogu 
pwd  # sprawdzenie ścieżki /simple-starter-webpack-wp/webpack
touch index.js # utworzenie pliku

Dla testu wpisuje do index.js :

const title = document.querySelector('h1');
title.style.color = "aqua";

Dopisuje w index_webpack.html przed </body>:

<script src="./webpack/index.js"></script>

Sprawdzam poprawność wyświetlania kodu JavaScript otwierając w przeglądarce plik index_webpack.html.
Nagłówek H1 został wyświetlony w kolorze aqua.

Rozpoczynam inicjalizację module bundler Webpack 5:

cd webpack
pwd # sprawdzenie scieżki /webpack-wp/webpack

Inicjujemy projekt będąc w katalogu webpack:

npm init -y # (bez ustawiania) || npm init # (z ustawianiem)

npm init -y
#  -y == yes ustawia w package.json wartości domyślne

Powstaje plik package.json z wartościami domyślnymi:

{
  "name": "simple-starter-webpack-wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

npm init # wprowadzamy własne wartości w package.json

Ustawiamy własne wartości:
package name: (webpack) simple-starter-webpack-wp
version: (1.0.0)
description: Simple starter Webpack 5 for WordPress
entry point: (index.js)
test command: ENTER
git repository: https://github.com/AnesseL/simple-starter-webpack-wp
keywords: webpack javascript js css sass scss wordpress
author: Agnieszka Leśków
license: (ISC) MIT

Powstaje plik package.json z własnymi ustawieniami:

{
  "name": "simple-starter-webpack-wp",
  "version": "1.0.0",
  "description": "Simple starter Webpack 5 for WordPress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AnesseL/simple-starter-webpack-wp.git"
  },
  "keywords": [
    "webpack",
    "javascript",
    "js",
    "css",
    "sass",
    "scss",
    "wordpress"
  ],
  "author": "Agnieszka Leśków",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/AnesseL/simple-starter-webpack-wp/issues"
  },
  "homepage": "https://github.com/AnesseL/simple-starter-webpack-wp#readme"
}

Podczas instalacji w package.json określamy status zapisu paczek przeznaczonych dla wersji developerskiej (dev) lub produkcyjnej (prod).

Z oznaczeniem -D === –save-dev === „devDependencies” – status zależności developerskiej to paczki używane tylko dla developmentu, podczas pracy nad projektem, które stosujemy do budowania wersji deweloperskiej (pluginy – wtyczki, loadery- ładowarki, wczytywarki, przekształcające różne typy plików nie obsługiwanych domyślnie przez webpack w moduły na użytek projektu), nie są później dołączane do kodu produkcyjnego.
Obecnie bez oznaczenia „Dependencies” – status zależności do budowania wersji produkcyjnej (np. dla bibliotek).

npm i webpack webpack-cli -D
npm uninstall webpack webpack-cli # usunięcie

webpack – to pakiet modułów
webpack-cli – to interfejs wiersza polecenia pakietu webpack

Po instalacji powstał katalog z pakietami node_modules i plik package-lock.json.

package-lock.json 
{
  "name": "simple-starter-webpack-wp",
  "version": "1.0.0",
  "description": "Simple starter Webpack 5 for WordPress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AnesseL/simple-starter-webpack-wp.git"
  },
  "keywords": [
    "webpack",
    "javascript",
    "js",
    "css",
    "sass",
    "scss",
    "wordpress"
  ],
  "author": "Agnieszka Leśków",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/AnesseL/simple-starter-webpack-wp/issues"
  },
  "homepage": "https://github.com/AnesseL/simple-starter-webpack-wp#readme",
  "devDependencies": {
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1"
  }
}

W tym samy katalogu webpack tworzymy plik webpack.config.js:

touch webpack.config.js # utworzenie pliku konfiguracyjnego

webpack.config.js – moduł Node.js wymaga użycia CommonJS i metody require()
a wszystko czego nie wpiszemy do tego pliku przyjmie wartość domyślną.

const path = require('path'); //podstawowy moduł Node.js

module.exports = {
  mode: 'development', 
  entry: path.resolve(__dirname, './index.js'), //Domyślny punkt wejscia
  output: {
    path: path.resolve(__dirname, './'), //Punkt wyjścia
    filename: 'bundle.js',
  }
};

W pliku package.json konfigurujemy rozruch:

  "scripts": {
    "dev": "webpack",
    "watch": "webpack -- --watch",
    "prod": "webpack -- --mode production"
  },

W pliku index_webpack.php wprowadzamy ścieżkę dla pliku wynikowego bundle.js:

<!-- <script src="./webpack/index.js"></script> -->
<script src="./webpack/bundle.js"></script>

Uruchamiamy i sprawdzamy poprawność wyświetlania w przeglądarce jak wyżej:

npm run dev || npm run watch # (wyjscie Ctrl + C z trybu śledzenia) || npm run prod

Powstaje plik wynikowy bundle.js. W celu sprawdzenia, wypróbowania powyższych opcji należy dla testów usunąć każdorazowo plik wynikowy bundle.js.

Plik index_webpack.html wyświetla się tak samo jak wcześniej.
Za każdym razem kiedy chcemy otrzymać plik wynikowy musimy wykonać ręcznie:

npm run dev || npm run prod

jedynie tryb –watch pozwala na pracę ciagłą, automatycznie po każdorazowej zmianie zapisze do pliku wynikowego.

cd ..   # przejście do głównego katalogu simple-starter-webpack-wp
pwd     # ścieżka /simple-starter-webpack-wp

Tworzymy katalog scss_webpack z plikiem main.scss

mkdir scss_webpack   # utworzenie katalogu
cd scss_webpack # przejscie do katalogu
pwd # sprawdzenie ściezki /webpack-wp/scss_webpack
touch main.scss # utworzenie pliku main.scss

Tworzymy w pliku main.scss przykładowe ostylowanie:

$red: red;
$green: green;
$blue: blue;
$coral: coral;
$gray: gray;
$white: white;
$black: black;
$bg: $gray;
body {
    background: $bg;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    row-gap: 10px;
    column-gap: 10px;
    transition: all 300ms ease-in;
}
h1 {
    color: $red;
}
h2 {
    color: $green;
}
h3 {
    color: $blue;
}
h4 {
    color: $coral;
}
h5 {
    color: $white;
}
h6 {
    color: $black;
}

cd .. # przejście do głównego katalogu simple-starter-webpack-wp
cd webpack # przejście do katalogu
pwd # sprawdzenie ścieżki /simple-starter-webpack-wp/webpack

Będąc w katalogu webpack instalujemy wszystko co będzie potrzebne do przetwarzania sass:

npm i sass sass-loader style-loader css-loader -D
npm uninstall sass sass-loader style-loader css-loader # usunięcie

sass – implementacja pliku wykonywalnego sass skompilowana do czystego JavaScript
sass-loader – ładuje, obsługuje pliki typu sass:scss, współpracuje z sass, node-sass (przestarzały)
style-loader – zmienia kod CSS na JavaScript, ładuje style, automatycznie dodaje style do nagłówka strony
css-loader – ładuje, wczytuje, przetwarza, zwraca, obsługuje typ pliku .css, odczytuje zawartość pliku .css

Wszystko zostanie odpalone od dołu do góry, czyli najpierw 'sass-loader’, następnie 'css-loader’ a na końcu 'style-loader’:
góra
’style-loader’
’css-loader’
’sass-loader’
dół

package.json
  "devDependencies": {
    "css-loader": "^6.7.3",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1"
  }

webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './index.js'), //Domyślny punkt wejscia
  output: {
    path: path.resolve(__dirname, './'), //Punkt wyjścia
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
           // Creates `style` nodes from JS strings (plugin instead of "style-loader")
            // loader: MiniCssExtractPlugin.loader,
            loader: 'style-loader',
            options: {}
          },
          {
            // Translates CSS into CommonJS
            loader: 'css-loader',
            options: {}
          },
          {
            // Compiles Sass to CSS
            loader: 'sass-loader',
            options: {
              implementation: require('sass'), // Prefer `dart-sass`
            },
          },
        ],
      },
    ],
  },
};

W index.js wstawiamy na samej górze:

import "../scss_webpack/main.scss";
const title = document.querySelector('h1');
title.style.color = "aqua";

Sprawdzamy preprocesor sass:

npm run dev || npm run watch # (wyjście Ctrl + C z trybu śledzenia) || npm run prod

Powstaje plik wynikowy bundle.js

Po otwierciu pliku index_webpack.html w przegladarce widać, że zostało zastosowane stylowanie z pliku main.scss.

Następnie wyekstrachowujemy z pliku wynikowego bundle.js pliki .css do odrębnego katalogu css z pomocą pluginu mini-css-extract-plugin zamieniajacy kod js na css.

npm i mini-css-extract-plugin -D
npm uninstall mini-css-extract-plugin # usunięcie

package.json
  "devDependencies": {
    "css-loader": "^6.7.3",
    "mini-css-extract-plugin": "^2.7.5",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1"
  }

webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './index.js'), //Domyślny punkt wejscia
  output: {
    path: path.resolve(__dirname, './'), //Punkt wyjścia
    filename: 'bundle.js',
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css$/i, //MiniCssExtractPlugin.loader zamiast "style-loader"
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
           // Creates `style` nodes from JS strings (plugin instead of "style-loader")
            loader: MiniCssExtractPlugin.loader,
            options: {}
          },
          {
            // Translates CSS into CommonJS
            loader: 'css-loader',
            options: {}
          },
          {
            // Compiles Sass to CSS
            loader: 'sass-loader',
            options: {
              implementation: require('sass'), // Prefer `dart-sass`
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: "../css_webpack/[name].css",
    }),
  ]
};

Plik index.js pozostaje bez zmian.
W pliku index_webpack.html zmieniamy script na link, gdyż plikiem wynikowym bedzie teraz .css
więc należy zakomentować script:

<!-- <script src="./webpack/index.js"></script> -->
<!-- <script src="./webpack/bundle.js"></script> -->

i dołożyć przed </head>:

<link rel="stylesheet" href="./css_webpack/main.css">

Teraz sprawdzamy czy prawidłowo wyświetla stylowanie poprzez link.

npm run dev || npm run watch # (wyjscie Ctrl + C z trybu śledzenia) || npm run prod

Powstaje katalog css_webpack wraz z plikami main.css i main.css.map, a także bundle.js.map dzięki wprowadzonej opcji w pliku webpack.config.js:

devtool: "source-map",

Sprawdzamy otwierając plik index_webpack.html w przegladarce, widać teraz, że nagłówek H1 zmienił kolor na czerwony.

Następnie dokładamy istotne detale:

npm i postcss-loader postcss autoprefixer -D
npm uninstal postcss-loader postcss autoprefixer # usunięcie

postcss-loader:

– moduł ładując postcss
– do przetwarzania CSS za pomocą postcss

postcss:

– pobiera plik CSS jako dane wejściowe, uruchamia wtyczki i przekaształca CSS z pomoca wtyczek js
– przekształca CSS w JavaScript
– aby działał najpierw nalezy skonigurowac w webpacku CSS
– posiada ogromną liczbę pluginów

autoprefixer:

– wtyczka postcss przekształcająca css poprzez js
– analizuje css i automatycznie dodaje prefiksy dostawców do css, używając danych z Can I Use (-webkit, -moz, itp.)

Webpack analizuje zapis od końca więc uruchomi PostCSS na pliku CSS poprzez postcss-loader.

package.json:
  "browserslist": [
    "defaults"
  ],
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "css-loader": "^6.7.3",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss": "^8.4.23",
    "postcss-loader": "^7.3.0",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1"
  }

Można też zastosować dla przeglądarek określone wartości:

package.json:
"browserslist": [
  "last 2 version", - ostatnie 2 wersje przeglądarek
  ">0.5%", - więcej niż 0.5% używa tych przeglądarek
  "Firefox ESR",
  "not dead" - nadal używane przeglądarki
],

Uzupełniamy webpack.config.js o:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

{
  loader: "postcss-loader",
  options: {
     postcssOptions: {
        plugins: [
           [
              "autoprefixer",
           ],
        ],
    },
  },
},

webpack.config.js 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {   //oobiekt
    main:  path.resolve(__dirname, './index.js'), //Domyślny punkt wejscia
  },
  output: {
    path: path.resolve(__dirname, './'), //Punkt wyjścia
    filename: 'bundle.js',
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css$/i, //MiniCssExtractPlugin.loader zamiast "style-loader"
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
           // Creates `style` nodes from JS strings (plugin instead of "style-loader")
            loader: MiniCssExtractPlugin.loader,
            options: {}
          },
          {
            // Translates CSS into CommonJS
            loader: 'css-loader',
            options: {}
          },
          {
            // Compiles Sass to CSS
            loader: 'sass-loader',
            options: {
              implementation: require('sass'), // Prefer `dart-sass`
            },
          },
          {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        [
                            "autoprefixer",
                        ],
                    ],
                },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: "../css_webpack/[name].css",
    }),
    require('autoprefixer')
  ]
};

Sprawdzamy czy autoprefixer działa jak należy uruchamiając:

npm run dev || npm run watch # (wyjście Ctrl + C z trybu śledzenia) || npm run prod

Powstaje katalog css_webpack wraz z plikami main.css i main.css.map, a także bundle.js.map dzięki wprowadzonej opcji w pliku webpack.config.js:

devtool: "source-map",

Sprawdzamy otwierając plik index_webpack.html w przegladarce.

W kolejnym kroku rozszerzamy o część prodykcyjną, w której zostnie zminimalizowany plik .css.
W katalgu webpack tworzę osobny plik webpack.config.prod.js:

touch webpack.config.prod.js # utworzenie pliku

, który jest przeznaczony indywidualnie dla wersji produkcyjnej mający za zadanie minimalizacji pliku wynikowy .css do .min.css

Następnie kopiuję kod z pliku webpack.config.js do webpack.config.prod.js.
Instaluję wtyczkę odpowiedzialną za wytworzenie takiego pliku:

npm i css-minimizer-webpack-plugin -D
npm uninstal css-minimizer-webpack-plugin # usunięcie

css-minimizer-webpack-plugin – narzędzie wiersza polecenia do kompresji css

package.json:
  "scripts": {
    "dev": "webpack",
    "watch": "webpack --watch",
    "prod": "webpack --config ./webpack.config.prod.js"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss": "^8.4.23",
    "postcss-loader": "^7.3.0",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1"
  }

W pliku webpack.config.prod.js dokładamy:

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
optimization: {
  minimize: true,
  minimizer: [
    new CssMinimizerPlugin({
    }),
  ],
},

webpack.config.prod.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main:  path.resolve(__dirname, './index.js'), //Domyślny punkt wejscia
  },
  output: {
    path: path.resolve(__dirname, './'), //Punkt wyjścia
    filename: 'bundle.js',
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css$/i, //MiniCssExtractPlugin.loader zamiast "style-loader"
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
           // Creates `style` nodes from JS strings (plugin instead of "style-loader")
            loader: MiniCssExtractPlugin.loader,
            options: {}
          },
          {
            // Translates CSS into CommonJS
            loader: 'css-loader',
            options: {}
          },
          {
            // Compiles Sass to CSS
            loader: 'sass-loader',
            options: {
              implementation: require('sass'), // Prefer `dart-sass`
            },
          },
          {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        [
                            "autoprefixer",
                        ],
                    ],
                },
            },
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
      }),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: "../css_webpack/[name].min.min.css",
    }),
    require('autoprefixer') //nie trzeba wpisywać
  ]
};

W index_webpack.html dodajemy dla wynikowego .min.css:

<link rel="stylesheet" href="./css_webpack/main.css"> <!-- dla npm run dev -->
<link rel="stylesheet" href="./css_webpack/main.min.css"> <!-- dla npm run prod -->

Sprawdzamy czy plik .css zostaje zminimalizowany:
Dla npm run dev powstaje katalog css_webpack wraz z plikami main.css i main.css.map
Dla npm run prod powstaje katalog css_webpack wraz z plikami main.min.css i main.min.css.map
a także bundle.js i bundle.js.map. Dla przypomnienia .map uzyskujemy dzięki wprowadzonej opcji w pliku webpack.config.js: devtool: „source-map”,.
Następnie sprawdzamy otwierając plik index_webpack.html w przeglądarce.

A teraz po przebrnięciu przez proces instalacyjny możemu już przejść do meritum sprawy.

W przypadku braku plików tworzymy własny bandler do przetworzenia sass w css lub ściągamy katalog simple-starter-webpack-wp z https://github.com/AnesseL/simple-starter-webpack-wp i odpowiedno go adoptujemy do własnego motywu WordPress np. pobranego z serwera. Możemy również dostosować bądź rozbudować bazową instalację o kluczowe elementy. Możliwości jest wiele tyle ile naszych pomsłów w ułatwianiu sobie pracy.

Przykładowa część zaimportowanego motywu WordPress z serwera np. z pomocą NetBeans IDE:

Theme

/css

/scss/main.css

W pierwszym kroku w celu zachowania katalogu css, nie tracąc tym samym jego zawartości gdyby poszło coś nie tak, najlepiej jest zmienić jego nazwę np. na _css. Następnie w Netbeans IDE jezeli z niego korzystamy należy w pierwszej kolejności zamenić w: Properties > Run Configuration > Upload Files: On Save na: Upload Files: Manually aby nie dochodziło do atumatycznego zapisu plików na serwer.

Następnie do pobranego z serwera motywu WordPress kopiujemy katalog webpack z plikami i kolejno dostosowujemy ścieżki adekwatnie do motywu:

webpack

/index.js

/package-lock.json

/package.json

/webpack.config.js

/webpack.config.prod.js

W webpack/index.js dostosowujemy do własnego motywu lub zmieniamy sieżkę na:

import "../scss/main.scss";

W webpack.config.js i webpack.config.prod.js dla wynikowego katalogu css zmieniamy na:

filename: "../css/[name].css",
filename: "../css/[name].min.css",

Następnie uruchamiamy terminal, przechodzimy do katalogu webpack i wykonujemy rozruch:

pwd # theme/webpack
npm install # instalowane projektu

Zostaną zainstalowane wszystkie zależności widniejące w package.json

Pracując np. w Netbeans IDE jeżeli wcześniej nie wykluczyliśmy katalogów, pewnych plików, których nie chcemy wgrywać na serwer to musimy wykluczyć między innymi katalog webpack/node_modules:
Properties > Ignored Folders > webpack/node_modules
gdyż nie jest on nam potrzebny dla wersji produkcyjnej na serwerze. Następnie jeżeli jest tak dla nas wygodniej możemy wrócić do ustawień automatycznego zapisu w Netbeans IDE:
Properties > Run Configuration > Upload Files: Manually na: Upload Files: On Save

Teraz możemy celebrować dalsze prace nad motywem:
NetBeans IDE > Tools > Open in Terminal
lub
VSCode > Terminal > New Terminal

pwd # sprawdzanie ścieżki /webpack
cd webpack # jeżeli nie jesteśmy w katalogu /webpack to należy do niego przejść
npm run dev || npm run prod # Użycie skryptów dla różnych plików konfiguracyjnych

Webpack posiada ogrom możliwości rozwiazań usparwniających automatyzację procesu pracy nad projektem, tylko od nas samych zależy i złożoności danego projektu czego tak naprawdę potrzebujemy i co zastosujemy w danym momencie.
W kolejnym materiale zostanie zaprezentowane inne rozbudowane rozwiązanie, z którym mozna zapoznać sie pod adresem: https://agnieszkaleskow.pl/konfiguracja-webpack-5-sass-javascript-es6-na-potrzeby-projektu-front-end/.

Cookie	Duration	Description
_GRECAPTCHA	5 months 27 days	This cookie is set by the Google recaptcha service to identify bots to protect the website against malicious spam attacks.
cookielawinfo-checkbox-advertisement	1 year	Set by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

KOMPENDIUM

Konfiguracja Webpack 5 na potrzeby zmodyfikowania plików CSS będących zasobem motywu WordPress

W tym projekcie zostaną wykorzystane: