:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

Narzędzia Świata: webpack-unused

Kilka miesięcy temu, nagrałem film o takim narzędziu, które pokazuje listę plików nieużywanych w projekcie opartym na Webpacku. Przyszła pora, aby opisać to narzędzie w serii “Narzędzia Świata”.

Logo Webpacka

Webpack - a co to?

W erze zmieniających się co kilka tygodni narzędzi JavaScript-owych od kilku miesięcy pojawił się lider w kategorii budowania aplikacji.

Webpack to narzędzie, które buduje pliki “produkcyjne” na podstawie plików developerskich. Jego podstawowe cechy to:

  • minifikacja kodu, tj. usuwanie komentarzy (w trybie produkcyjnym)
  • obfuskacja zmiennych, tj. skracanie nazw do literowych (w trybie produkcyjnym)
  • daje możliwość łatwej transpilacji kodu, np. z kody pisanego w TypeScript do prostego JavaScript-u w standardzie ECMAScript 5
  • daje możliwość łatwej konfiguracji preprocesorów do CSS-ów.

Moje projekty

Jestem autorem kilku projektów pomocniczych:

Nudny artykuł, zobacz film! :clapper:

Jeśli nie chce Ci się czytać, ani testować nowego narzędzia, możesz poświęcić niecałe 4 minuty zobaczyć jak ja wykorzystuję “webpack-unused” w nowo stworzonym projekcie.

Jak działa webpack-unused?

Krok 1. Stworzenie projektu

Copy + paste

mkdir test-project
cd $_
mkdir src/
touch src/main.js
echo "console.log('main.js')" > src/main.js
touch src/unused.js
echo "console.log('unused.js')" > src/main.js

Krok 2. Budowanie projektu

Copy + paste

touch package.json
vi package.json

Zawartość pliku package.json:

{
    "name": "test-project",
    "scripts": {
        "build": "webpack"
    }
}

Krok 3. Konfiguracja Webpacka

Copy + paste

touch webpack.config.js
vi webpack.config.js

Zawartość pliku webpack.config.js:

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "./bundle.js"
    }
};

Krok 4. Instalacja i uruchomienie Webpacka

Copy + paste

npm install --save-dev webpack
npm run build

Aplikacja powinna zostać pomyślnie zbudowana, tj. powinien powstać plik bundle.js w głównym katalogu.

Krok 5. Instalacja i uruchomienie webpacka-unused

Zainstaluj globalnie webpack-unused, ponieważ nie jest to narzędzie związane z żadnym projektem, więc nie ma argumentu, aby tego nie zrobić.

Copy + paste

npm install -g webpack-unused

Dodaj zadanie, które będzie budowało aplikację i uruchamiało dzisiejsze narzędzie:

Copy + paste

vi package.json
{
    "name": "test-project",
    "scripts": {
        "build": "webpack"
        "build:display-unused-files": "webpack --json | webpack-unused"
    }
}

Uruchom polecenie, które zbuduje aplikację, a wynik z procesu budowania przekaże do omawianego narzędzia:

Copy + paste

npm run build:display-unused-files

Polecenie wyświetli listę plików, które nie są używane:

./src/unused.js