Webpack Tutorial:Jak nastavit webpack 5 od nuly

webpack býval pro mě frustrující a zdrcující bestie. Cítil jsem se bezpečně pomocí něčeho jako create-react-app nastavit projekt, ale pokud to bylo možné, vyhnul jsem se webpacku, protože se zdál složitý a matoucí.

Pokud se necítíte pohodlně nastavovat webpack od začátku pro použití s Babel, TypeScript, Sass, React nebo Vue nebo nevíte, proč byste měli chtít webpack používat, pak je pro vás ideální článek. Stejně jako všechny věci, jakmile se do toho ponoříte a naučíte se to, uvědomíte si, že to není tak děsivé a existuje jen několik hlavních konceptů, které se musíte naučit, jak je nastavit.

Kromě tohoto článku jsem vytvořil extrémně solidní webpack 5 Boilerplate, který vám pomůže začít s jakýmkoli projektem. Doporučuji to také zkontrolovat, pokud znáte webpack 4, ale chcete vidět nastavení webpacku 5.

Předpoklady

Základní znalost HTML a CSS
Základní znalost JavaScriptu a programování
Znalost syntaxe a funkcí ES6
Možnost nastavit prostředí Node.js
Znalost příkazového řádku

Cíle

Zjistěte, co je webový balíček a proč jej budete chtít používat
Nastavte vývojový server pomocí webového balíčku
Nastavte proces sestavení produkce pomocí webového balíčku

Obsah

Co je webpack
Instalace
Základní konfigurace
- Vstup
- Výstup
Pluginy
- Šablona HTML
- Čisté
Moduly a nakladače
- Babel (JavaScript)
- Obrázky
- Písma a vložená písma
- Styly
Vývoj

Co je webpack?

Webové stránky již většinou nejsou psány pouze v prostém HTML s trochou volitelného JavaScriptu – často jsou celé vytvořeny JavaScriptem. Musíme tedy sbalit, minifikovat a přeložit kód do něčeho, čemu rozumí všechny prohlížeče, což je místo, kde přichází na řadu webpack.

webpack je balíček modulů. Úhledně zabalí veškerý váš kód pro prohlížeč. Umožňuje vám napsat nejnovější JavaScript pomocí Babel nebo použít TypeScript a zkompilovat jej do něčeho kompatibilního s různými prohlížeči a úhledně zmenšeného. Umožňuje také importovat statická aktiva do vašeho JavaScriptu.

Pro vývoj poskytuje webpack také vývojový server, který může aktualizovat moduly a styly za běhu, když uložíte. vue create a create-react-app spoléhat na webpack pod kapotou, ale můžete si pro ně snadno nastavit vlastní konfiguraci webpacku.

Webpack umí mnohem více, ale tento článek vám pomůže seznámit se s koncepty a něco nastavit.

Instalace

Nejprve vytvořte adresář, ve kterém bude váš projekt žít, a spusťte projekt Node. Říkám tomu webpack-tutorial .

mkdir webpack-tutorial
cd webpack-tutorial
npm init -y # creates a default package.json

Chcete-li začít, nainstalujte webpack a webpack-cli . Toto jsou základní technologie pro nastavení.

npm i -D webpack webpack-cli

webpack – Balíček modulů a aktiv
webpack-cli - Rozhraní příkazového řádku pro webpack

Uděláme src složku, která obsahuje všechny zdrojové soubory. Začnu vytvořením jednoduchého index.js soubor.

src/index.js

console.log('Interesting!')

Dobře, takže nyní máte projekt Node s nainstalovanými základními balíčky a indexovým souborem ke spuštění. Nyní začneme vytvářet konfigurační soubory.

Základní konfigurace

Začněme s nastavením sestavení Webpacku. Vytvořte webpack.config.js v kořenovém adresáři vašeho projektu.

Záznam

První částí nastavení konfigurace webového balíčku je definování vstupního bodu , na jaký soubor nebo soubory se webpack při kompilaci podívá. V tomto příkladu nastavíme vstupní bod na src/index.js .

webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    main: path.resolve(__dirname, './src/index.js'),
  },
}

Výstup

Výstup je místo, kde se přibalený soubor vyřeší. Budeme mít výstup v dist složku, kde se vytváří produkční kód. [name] ve výstupu bude main , jak je uvedeno ve vstupním objektu.

webpack.config.js

module.exports = {
  /* ... */

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
}

Nyní máme minimální konfiguraci potřebnou k sestavení balíčku. V package.json , můžeme vytvořit build skript, který spouští webpack příkaz.

package.json

"scripts": {
  "build": "webpack"
}

Nyní to můžete spustit.

npm run build

asset main.bundle.js 19 bytes [emitted] [minimized] (name: main)
./src/index.js 18 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 152 mss

Uvidíte, že dist složka byla vytvořena s main.bundle.js . Se souborem se zatím nic nestalo, ale nyní jsme úspěšně vytvořili webpack.

Pluginy

webpack má zásuvné rozhraní, díky kterému je flexibilní. Interní kód webpacku a rozšíření třetích stran používají pluginy. Existuje několik hlavních, které využije téměř každý projekt webového balíčku.

Soubor šablony HTML

Máme tedy náhodný svazkový soubor, ale zatím se nám příliš nehodí. Pokud vytváříme webovou aplikaci, potřebujeme stránku HTML, která načte daný balíček JavaScriptu jako skript. Protože chceme, aby soubor HTML automaticky přinesl skript, vytvoříme šablonu HTML s html-webpack-plugin .

html-webpack-plugin - Vygeneruje soubor HTML ze šablony

Nainstalujte plugin.

npm i -D html-webpack-plugin

Vytvořte template.html soubor v src složku. Do šablony můžeme zahrnout proměnné další vlastní informace. Přidáme vlastní title a jinak bude vypadat jako běžný soubor HTML s root div.

src/template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

Vytvořte plugins vlastnost vaší konfigurace a do výstupu přidáte plugin, název souboru (index.html ) a odkaz na soubor šablony, na kterém bude založen.

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  /* ... */

  plugins: [    new HtmlWebpackPlugin({      title: 'webpack Boilerplate',      template: path.resolve(__dirname, './src/template.html'), // template file      filename: 'index.html', // output file    }),  ],}

Nyní znovu spusťte sestavení. Uvidíte dist složka nyní obsahuje index.html s načteným balíčkem. Úspěch! Pokud tento soubor načtete do prohlížeče, uvidíte Interesting! v konzole.

Pojďme to aktualizovat, abychom do DOM vložili nějaký obsah. Změňte index.js vstupní bod a spusťte znovu příkaz build.

src/index.js

// Create heading node
const heading = document.createElement('h1')
heading.textContent = 'Interesting!'

// Append heading node to the DOM
const app = document.querySelector('#root')
app.append(heading)

Chcete-li to nyní vyzkoušet, můžete přejít na dist složku a spusťte server. (V případě potřeby nainstalujte http-server globálně.)

http-server

Uvidíte náš JavaScript vložený do DOM s nápisem „Zajímavé!“. Také si všimnete, že soubor balíčku je minimalizován.

Vyčistit

Budete také chtít nastavit clean-webpack-plugin , což vymaže cokoli v dist složku po každém sestavení. To je důležité, aby se zajistilo, že žádná stará data nezůstanou pozadu.

clean-webpack-plugin - Odebrat/vyčistit složky sestavení

webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  /* ... */

  plugins: [
    /* ... */
    new CleanWebpackPlugin(),  ],
}

Moduly a nakladače

webpack používá zavaděče k předběžnému zpracování souborů načtených prostřednictvím modulů. Mohou to být soubory JavaScript, statické položky, jako jsou obrázky a styly CSS, a kompilátory, jako jsou TypeScript a Babel. webpack 5 má také několik vestavěných zavaděčů pro aktiva.

Ve svém projektu máte soubor HTML, který se načte a přinese nějaký JavaScript, ale stále ve skutečnosti nic nedělá. Jaké jsou hlavní věci, které chceme, aby tato konfigurace webového balíčku dělala?

Zkompilujte nejnovější a nejlepší JavaScript do verze, které prohlížeč rozumí
Importujte styly a kompilujte SCSS do CSS
Import obrázků a písem
(Volitelné) Nastavte React nebo Vue

První věc, kterou uděláme, je nastavit Babel pro kompilaci JavaScriptu.

Babel (JavaScript)

Babel je nástroj, který nám umožňuje používat zítřejší JavaScript již dnes.

Nastavíme pravidlo, které kontroluje všechny .js soubor v projektu (mimo node_modules ) a používá babel-loader transpilovat. Existuje také několik dalších závislostí pro Babel.

babel-loader - Transpilujte soubory pomocí Babel a webpack.
@babel/core - Transpile ES2015+ na zpětně kompatibilní JavaScript
@babel/preset-env – Inteligentní výchozí nastavení pro Babel
@babel/plugin-proposal-class-properties - Příklad vlastní konfigurace Babel (použití vlastností přímo na třídě)

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties

webpack.config.js

module.exports = {
  /* ... */

  module: {    rules: [      // JavaScript      {        test: /\.js$/,        exclude: /node_modules/,        use: ['babel-loader'],      },    ],  },}

Nyní je Babel nastaven, ale náš plugin Babel nikoli. Můžete demonstrovat, že to nefunguje, přidáním příkladu pre-Babel kódu do index.js .

src/index.js

// Create a class property without a constructorclass Game {  name = 'Violin Charades'}const myGame = new Game()// Create paragraph nodeconst p = document.createElement('p')p.textContent = `I like ${myGame.name}.`
// Create heading node
const heading = document.createElement('h1')
heading.textContent = 'Interesting!'

// Append SVG and heading nodes to the DOM
const app = document.querySelector('#root')
app.append(heading, p)

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/you/webpack-tutorial/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (3:8):

  1 | // Create a class property without a constructor
  2 | class Game {
> 3 |   name = 'Violin Charades'
    |        ^
  4 | }

Chcete-li to opravit, jednoduše vytvořte .babelrc soubor v kořenovém adresáři vašeho projektu. Tím přidáte spoustu výchozích hodnot s preset-env a plugin, který jsme chtěli s plugin-proposal-class-properties .

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Nyní další npm run build a vše bude připraveno.

Obrázky

Budete chtít mít možnost importovat obrázky přímo do souborů JavaScriptu, ale to není něco, co JavaScript ve výchozím nastavení umí. Pro demonstraci vytvořte src/images a přidejte k němu obrázek a zkuste jej importovat do index.js soubor.

src/index.js

import example from './images/example.png'

/* ... */

Když spustíte sestavení, znovu se zobrazí chyba:

ERROR in ./src/images/example.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

webpack má některé vestavěné moduly aktiv, které můžete použít pro statická aktiva. Pro typy obrázků použijeme asset/resource . Všimněte si, že toto je type a ne loader .

webpack.config.js

module.exports = {
  /* ... */
  module: {
    rules: [
      // Images      {        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,        type: 'asset/resource',      },    ],
  },
}

Uvidíte, že soubor dostal výstup na dist složka po sestavení.

Písma a vložené písmo

webpack má také modul aktiv pro vkládání některých dat, jako jsou svgs a fonty, pomocí asset/inline typ.

src/index.js

import example from './images/example.svg'

/* ... */

webpack.config.js

module.exports = {
  /* ... */
  module: {
    rules: [
      // Fonts and SVGs      {        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,        type: 'asset/inline',      },    ],
  },
}

Styly

Použití zavaděče stylů je nezbytné, abyste mohli dělat něco jako import 'file.css' ve vašich skriptech.

Mnoho lidí v dnešní době používá CSS-in-JS, stylizované komponenty a další nástroje k vnesení stylů do svých aplikací JavaScript.

Někdy stačí načíst soubor CSS. Tento web má pouze jeden soubor CSS. Možná chcete použít PostCSS, který vám umožní používat všechny nejnovější funkce CSS v jakémkoli prohlížeči. Nebo možná chcete použít Sass, preprocesor CSS.

Chci používat všechny tři - psát v Sass, zpracovávat v PostCSS a kompilovat do CSS. To zahrnuje zavedení několika zavaděčů a závislostí.

sass-loader - Načtěte SCSS a zkompilujte do CSS
- node-sass - Node Sass
postcss-loader - Zpracujte CSS pomocí PostCSS
- postcss-preset-env - Rozumné výchozí hodnoty pro PostCSS
css-loader - Vyřešte import CSS
style-loader - Vložení CSS do DOM

npm i -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass

Stejně jako u Babel bude PostCSS vyžadovat konfigurační soubor, takže jej vytvořte a přidejte do kořenového adresáře.

postcss.config.js

module.exports = {
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions',
    },
  },
}

Abych otestoval, že Sass a PostCSS fungují, udělám src/styles/main.scss s proměnnými Sass a příkladem PostCSS (lch ).

src/styles/main.scss

$font-size: 1rem;
$font-color: lch(53 105 40);

html {
  font-size: $font-size;
  color: $font-color;
}

Nyní importujte soubor v index.js a přidejte čtyři nakladače. Kompilují se od posledního k prvnímu, takže poslední, které budete chtít v seznamu, je sass-loader protože to potřebuje zkompilovat, pak PostCSS, pak CSS a nakonec style-loader , který vloží CSS do DOM.

src/index.js

import './styles/main.scss'

/* ... */

webpack.config.js

module.exports = {
  /* ... */
  module: {
    rules: [
      // CSS, PostCSS, and Sass      {        test: /\.(scss|css)$/,        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],      },    ],
  },
}

Když nyní přestavíte, všimnete si, že byly použity Sass a PostCSS.

Vývoj

Spuštěno npm run build každá aktualizace je únavná. Čím větší bude váš web, tím déle bude trvat jeho vytvoření. Pro webpack budete chtít nastavit dvě konfigurace:

produkční konfigurace, která minimalizuje, optimalizuje a odstraňuje všechny zdrojové mapy
vývojová konfigurace, která spouští webový balíček na serveru, aktualizuje se při každé změně a má zdrojové mapy

Místo sestavování na dist vývojový režim pouze spustí vše v paměti.

Chcete-li nastavit vývoj, nainstalujete webpack-dev-server .

webpack-dev-server - Vývojový server pro webpack

npm i -D webpack-dev-server

Pro demonstrativní účely můžeme pouze přidat vývojovou konfiguraci do aktuálního webpack.config.js soubor, který vytváříme a testujeme. Budete však chtít vytvořit dva konfigurační soubory:jeden s mode: production a jeden s mode: development . V základní verzi webového balíčku 5 demonstruji, jak používat webpack-merge umístit všechny základní konfigurace webového balíčku do jednoho souboru a všechny speciální vývojové nebo produkční konfigurace do webpack.prod.js a webpack.dev.js soubory.

const webpack = require('webpack')

module.exports =  {
  /* ... */
  mode: 'development',
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, './dist'),
    open: true,
    compress: true,
    hot: true,
    port: 8080,
  },

  plugins: [
    /* ... */
    // Only update what has changed on hot reload
    new webpack.HotModuleReplacementPlugin(),
  ],
})

Přidáváme mode: development a vytvoření devServer vlastnictví. Nastavím na něm pár výchozích hodnot - port bude 8080 , automaticky se otevře okno prohlížeče a používá hot-module-replacement, který vyžaduje webpack.HotModuleReplacementPlugin zapojit. To umožní modulům aktualizovat, aniž by bylo nutné kompletně znovu načíst stránku – takže pokud aktualizujete některé styly, změní se pouze tyto styly a nebudete muset znovu načítat celý JavaScript, což značně urychluje vývoj.

Nyní budete používat webpack serve příkaz k nastavení serveru.

package.json

"scripts": {
  "start": "webpack serve"
}

npm start

Po spuštění tohoto příkazu se zobrazí odkaz na localhost:8080 automaticky vyskočí ve vašem prohlížeči. Nyní můžete aktualizovat Sass a JavaScript a sledovat, jak se aktualizuje za běhu.

Závěr

To by vám mělo pomoci začít s webovým balíčkem. Znovu jsem vytvořil webový balíček 5 připravený pro produkci s Babel, Sass, PostCSS, optimalizací výroby a vývojovým serverem, který obsahuje vše z tohoto článku, ale jde do více podrobností. Odtud můžete snadno nastavit React, Vue, Typescript nebo cokoli jiného, co byste mohli chtít.

základní verze webového balíčku 5

Podívejte se na to, hrajte si s tím a užijte si to!

Webpack Tutorial:Jak nastavit webpack 5 od nuly

Předpoklady

Cíle

Obsah

Co je webpack?

Instalace

Základní konfigurace

Záznam

Výstup

Pluginy

Soubor šablony HTML

Vyčistit

Moduly a nakladače

Babel (JavaScript)

Obrázky

Písma a vložené písmo

Styly

Vývoj

Závěr

Naučte se koncepty Webpacku a vytvořte si vlastní plugin Webpack.

Changelog:DEV upgradováno na Webpacker 4/Babel 7

Kontrolujte výřečnost webpacku při programovém spouštění služby vue-cli-service

Jak zrychlit sestavení webového balíčku a vytvořit menší balíček

Jak nastavit spolehlivou a udržovatelnou službu Google Analytics ve Webpacku

kompilátor webpack5.plugin