Pokud chcete pokrýt všechny případy použití sestavení jedním webpack.config , v určitém okamžiku budete chtít začít ladit konfiguraci na základě případu použití. Tento krátký průvodce vám ukáže, jak to udělat s --mode=production jako příklad.

Výchozí bod

Příklad začínám kódem generovaným mým generátorem číslic. Dodává se bez konfigurace webového balíčku – má vše nastaveno tak, aby fungovalo s výchozími hodnotami.

Cíl

Nejprve chci podporovat dva typy sestavení

• výchozí s --mode=none , pro testování místně neobfuskovaného kódu
• výroba s --mode=production , určený k nasazení

V reálném projektu se můžete ocitnout s podobnými požadavky – vyhrazené sestavení pro testy jednotek nebo e2e atd.

package.json

Prvním krokem je definovat 2. sestavení skriptu v package.json :

{
  ...
  "scripts": {
    ...
    "build": "webpack --mode=none",
    "build:production": "webpack --mode=production"
  },
}

Případ použití pro čtení režimu

Jedním z důvodů, proč bychom chtěli sestavení odlišit, je nastavení zdrojové mapy řízené pomocí devtool příznak na konfiguračním objektu. V jeho dokumentaci je popsaných více než 25 možných hodnot a některé jsou rychlé a optimalizované pro rychlost ve vývojovém pracovním postupu, zatímco jiné jsou pomalejší, ale vhodnější pro nasazení v produkci.

Konfigurační funkce

Webpack pracuje s mnoha přístupy ke konfiguračnímu souboru. Jednou z povolených forem je konfigurační funkce. Tento přístup je o něco složitější než konfigurační objekty, ale pohodlně umožní chování, které zde chceme mít.

webpack.config.js :

module.exports = function (env, argv) {
  return {
    devtool: argv.mode === "production" ? "source-map" : "eval",
  };
};

• argv je poskytován se všemi hodnotami, které máme v webpack zavolat
• argv.mode je rovno "production" když spustíme npm run build:production" and "none"for the default npm spustit sestavení
• "source-map" vytvoří pomalou, ale vysoce kvalitní zdrojovou mapu doporučenou pro produkční použití
• "eval" je rychlý, ale určený pouze pro vývoj

Pracovní kód

Takže nakonec máme:

$  npm run build               

> [email protected] build /home/marcin/workspace/github/webpack-read-mode
> webpack --mode=none

asset main.js 1.1 KiB [compared for emit] (name: main)
./src/index.js 23 bytes [built] [code generated]
webpack 5.59.1 compiled successfully in 66 ms

$ ls dist
main.js

velký, jeden soubor pro místní sestavení;

$ npm run build:production

> [email protected] build:production /home/marcin/workspace/github/webpack-read-mode
> webpack --mode=production

asset main.js 55 bytes [emitted] [minimized] (name: main) 1 related asset
./src/index.js 23 bytes [built] [code generated]
webpack 5.59.1 compiled successfully in 170 ms

$ ls dist
main.js  main.js.map

A menší main.js &další soubor se zdrojovou mapou pro produkční sestavení.

Odkazy

• úložiště zdrojového kódu
• videokurz mého webového balíčku

Souhrn

Doufám, že vám tato příručka bude užitečná pro projekty, na kterých pracujete. Pokud vás zajímají další strategie pro správu různých případů použití sestavení vedle sebe, dejte mi vědět v komentářích.