Přehled

V tomto příspěvku na blogu vám ukážeme, s jakými problémy se dříve vývojáři potýkali s knihovnami a frameworky, jak tento problém řeší balíček webpack a případ použití balíčku webpack pro základní aplikace typu Typescript.

Také vám ukážeme základní koncepty pomocí příkladů a funkcí balíčku webpack.

Jaký byl problém před webpackem.

Jsme vývojáři JS, máme obrovskou komunitu vývojářů, kteří se podílejí na neustálém úsilí o zlepšování celkové uživatelské a vývojářské zkušenosti s používáním a vytvářením JavaScript/webových aplikací, a proto vytváříme nové knihovny a rámce.

Vyvinulo se také několik návrhových vzorů, které vývojářům poskytly lepší, výkonnější a přitom velmi jednoduchý způsob psaní složitých aplikací JavaScript.

Postupně začaly být objemné, se zavedením modulů JavaScriptu, nakonec to vše vedlo k situaci, kdy jsme měli 4x nebo 5x soubory v celkovém balíčku aplikace.

Celková velikost aplikace je tedy výzvou. Nyní je otázkou, jak spravovat závislosti a velikost aplikace.

Co je Webpack Module Bundler?

Webpack je knihovna JavaScript, kterou vytvořil a spravuje Tobias Koppers a tým . Jedná se o agresivní a výkonný modulový balík pro aplikace JavaScript.

Sbalí všechny moduly (soubory jako CSS, HTML, Typescript, .env atd..) ve vaší aplikaci do jednoho nebo více balíčků (často jen jeden soubor, main.js nebo index.js nebo index.html (prohlížeč) ).

Webpack využívá pomoc nakladačů a pluginy , pak se může transformovat , minifikovat a optimalizovat všechny typy souborů před tím, než je budou poskytnuty jako jeden balíček prohlížeči nebo serveru.

Jak interně funguje webpack?

Stručně řečeno, Webpack projde váš balíček a vytvoří to, co nazývá graf závislosti který se skládá z různých modulů, které by vaše aplikace/projekt vyžadoval, aby fungoval podle očekávání.

V závislosti na tomto grafu vytvoří nový balíček, který se skládá z úplného minimálního počtu požadovaných souborů, často pouze jednoho souboru bundle.js nebo index.js, který lze zapojit do souboru HTML (pokud reaguje Application) nebo main. js (aplikace na straně serveru) snadno a používá se pro aplikaci.

Základní koncepty

• Vstup
• Výstup
• Nakladače
• Pluginy
• Režim

Vstup

soubor s jedním záznamem

module.exports = {
  entry:'./src/index.js'
}

soubor s více položkami

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
}

Výstup

module.exports = {
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  }
}

Nějaký libraryTarget možnosti, kterou verzi ECMAScriptu chcete vytisknout.

1. libraryTarget:"umd", // enum
2. libraryTarget:"umd-module", // modul ES2015 zabalený v UMD
3. libraryTarget:"commonjs-module", // modul ES2015 zabalený do CommonJS
4. libraryTarget:"commonjs2", // exportováno pomocí module.exports
5. libraryTarget:"commonjs", // exportováno jako vlastnosti do exportů
6. libraryTarget:"amd", // definovaná metodou definovanou AMD
7. libraryTarget:"this", // vlastnost nastavená na tomto
8. libraryTarget:"var", // proměnná definovaná v kořenovém rozsahu

Nakladače

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use:
          [
            'style-loader',
            'css-loader',
          ]
      }
    ]
  }
  /*...*/
}

Několik příkladů Loaders,

1. sass-loader :Načte soubor SASS/SCSS a zkompiluje jej do CSS. Aby fungoval, vyžaduje nodess.
2. node-sass :Tato knihovna vám umožňuje nativně kompilovat soubory .scss do CSS neuvěřitelnou rychlostí a automaticky přes spojovací middleware.
3. css-loader :Zavaděč css interpretuje @import a url() jako import/require() a řeší je.
4. style-loader :Přidejte CSS do DOM.
5. zavaděč souborů :Instruuje webpack, aby vyslal požadovaný objekt jako soubor a vrátil svou veřejnou adresu URL.
6. image-webpack-loader :Minimalizujte obrázky PNG, JPEG, GIF a SVG pomocí funkce Imagemin.

Pluginy

module.exports = {
  /*...*/
  plugins: [
    new HTMLWebpackPlugin(),
    new CleanWebpackPlugin(['dist']),
  ]
  /*...*/
}

HTMLWebpackPlugin plugin má za úkol automaticky vytvořit soubor HTML a přidat cestu k výstupnímu balíčku JS, takže JavaScript je připraven k poskytování.

CleanWebpackPlugin lze použít k vymazání složky dist/ před vytvořením jakéhokoli výstupu, takže při změně názvu výstupního souboru nenecháte žádné soubory.

Režim

Produkce

Vývoj

Instalace webového balíčku

Globální instalace

s přízí:

yarn global add webpack webpack-cli

s npm:

npm i -g webpack webpack-cli

Jakmile to uděláte, měli byste být schopni spustit webpack-cli v cmd a přidejte to do package.json soubor:

{
  //...
  "scripts": {
    "build": "webpack --config webpack.prod.js"
  }
}

pak spusťte npm run build

Příklad

Výstup konzoly

JFrog nasadil balíček npm: