Úvod > Blog > Články > Programování > Webpack s NPM >

Webpack s NPM

30.01.2019 Programování #webpack #npm

Základní nastavení webpacku ve spojení s NPM.

Je důležité rozdělit kód JavaScriptu a CSS na malé a stručné části. Ulehčujeme pro sebe i ostatní, aby je zvládli a také je později pochopili a udržovali. Prohlížeče na druhou stranu preferují co nejméně souborů. Mohou být velké a dlouho se načítající. To je místo pro Webpack.

Webpack je nástroj pro vývoj webových aplikací pro získání všech souborů CSS a JavaScript. Výsledek je často označován jako "svazek/bundle". V tomto článku vám ukážeme, jak nastavit základní prostředí pro JavaScript a Sass.

Instalace Node a NPM

Aplikace Webpack pro svůj běh vyžaduje Node.js a npm (správce balíčků uzlů).

Stáhněte a nainstalujte Node z nodejs.org .

Chcete-li nainstalovat npm, otevřete příkazový řádek (například terminál Mac) a spusťte:

sudo npm install -g

Sudo a -g znamená, že v počítači jako správce instalujete balíček Node globálně. Požádá o heslo vašeho počítače.

Chcete-li nainstalovat npm, otevřete příkazový řádek (například terminál Mac) a spusťte:

npm init

Budete procházet procesem vytváření souboru package.json. Výchozí nastavení je v pořádku, takže stačí stisknout klávesu enter. Můžete to změnit později.

Když je soubor package.json vytvořen, uvidíte malý dokument s daty. Právě zde je definováno vše co potřebujete k projektu.

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Instalace Webpacku

Chcete-li do projektu přidat Webpack, spusťte:

npm install webpack -D

Provedou se 3 věci:

  • Název Webpack se přidává jako dev závislost v souboru package.json (to je to, o čem je příkaz -D v příkazu). To projektu říká, že Webpack je nástroj, který budeme používat v procesu vývoje, nikoliv na skutečném webu.
  • Do projektu se přidá nová složka s názvem node_modules.
  • Webpack (složka souborů) se objeví uvnitř modulu node_modules.

Přidání Webpacku jako skript

Do souboru package.json přidejte následující:

"scripts": {
  "build": "webpack",
  "start": "webpack --watch"
},

To umožňuje spustit verzi projektu Webpack pomocí npm run build a npm run start v příkazovém řádku.

Struktura souborů

  1. Vytvořte novou složku nazvanou src v kořenovém adresáři projektu.
  2. Vytvořte soubor uvnitř src nazvaný app.js. Zde se budou nacházet všechny soubory .js a .scss.
  3. Vytvořte soubor index.html v kořenovém adresáři projektu.
  4. Přečtěte si JavaScript před < / body > v index.html.
<script type="text/javascript" src="dist/bundle.js"></script>

Všimněte si, že zápis neobsahuje src/app.js, které jsme právě vytvořili, ale dist/bundle.js. Tento soubor ve skutečnosti ještě neexistuje. To je to, co Webpack vytvoří pro nás.

Webpack config

  1. Vytvořte soubor nazvaný webpack.config.js v kořenovém adresáři projektu.
  2. Zkopírujte a vložte následující úryvek, který bude informovat Webpack, jakým způsobem jej chceme použít:
const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

Entry a Output

  • Entry: Stejně jako soubor a složku, které jsme právě vytvořili, se vstupní soubor nazývá app.js a je ve složce src.
  • Output: Zde umístí Webpack všechny připravené soubory. Soubor se jmenuje bundle.js a objeví se ve složce dist (distribuce).

Jména můžete měnit podle toho, co chcete, pokud jsou v synchronizaci mezi webpack.config.js, soubory, složkami a propojeným skriptem v HTML.

Vložení JavaScriptu

Nyní vytvoříme nějaký kód pro práci s Webpackem.

1. Přejděte do složky src a vytvořte novou složku s názvem js.

2. Uvnitř js vytvořte soubor JavaScript nazvaný rainbows.js.

3. Napište JavaScript v rainbows.js, například:

console.log ('Toto je rainbows.js')

4. Vytvořte další soubor JavaScript uvnitř java nazvaný unicorns.js.

5. Napište JavaScript v unicorns.js, například:

console.log ('Dobrý den, jednorožec!')

6. Do souboru app.js přidejte následující položky pro importování souborů rainbows.js a unicorns.js

import './js/rainbows.js'; 
import './js/unicorns.js';

7. Spusťte webový balíček v Terminálu spuštěním:

npm run build

Nyní se objevila složka dist!

Když v prohlížeči otevřete index.html, otevřete Nástroje pro vývojáře a podívejte se do konzoly. Uvidíte, že se zobrazují zprávy konzoly z obou souborů rainbows.js a unicorns.js.

Přidání CSS

1. Přidejte novou složku uvnitř src s názvem scss.

2. Přidat soubor uvnitř skss nazývaný base.scss.

3. Napište několik CSS uvnitř base.scss, například:

$bg-color: pink;
body {
 background: $bg-color;
}

4. K importu našeho base.scss přidejte do src / app.js následující:

import './scss/base.scss'

Aby mohl Webpack číst styl Sass, potřebujeme další zavaděče - loadery.

Přidání zavaděčů stylů

1. V Terminálu spusťte instalaci styl-loader , css-loader , sass-loader , node-sass , extract-text-webpack-plugin.

npm instalovat style-loader css-loader sass-loader node-sass extrakt-text-webpack-plugin -D

2. Přidejte plugin Extract Text do horní části souboru webpack.config.js. Tím se CSS přesune do samostatného souboru. 

const ExtractTextPlugin = require('extract-text-webpack-plugin');

3. Nyní Webpacku řekneme, aby vyhledal .scss-files. Webpack je potom spustí pomocí plugin Extract Text a CSS a Sass-loader. Vložte toto na pravou stranu za uzavírací závorky výstupu. Nezapomeňte na čárku:

output: {
  ...
},
module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
  ]
}

4. Musíme také odkazovat na plugin Extract Text Right před uzavírací závorky. To bude Webpacku říkat, že bychom rádi, aby všechny CSS zabalil do samostatného souboru a nazvali ho style.css.

plugins: [
  new ExtractTextPlugin('style.css')
]

Soubor webpack.config.js bude vypadat následovně:

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ]
};

Spuštění HTML souboru se všemi moduly

1. Do hlavičky html souboru vložte připojení css souboru

<link rel='stylesheet' href='dist/style.css'>

2. Spusťte z teminálu webpack

npm run build

3. Otevřete index.html v prohlížeči. Má-li růžovou barvu pozadí, znamená to, že je součástí CSS.

4. Pomocí příkazu watch, který je přidán do webpacku ve skript npm na začátku, nemusíte spouštět pokaždé soubor htmo, když provedete změnu. Webpack se při uložení do editoru automaticky načte:

npm run start

5. Nyní proveďte změnu v base.scss, například:

$ bg-color: oranžová;

6. Aktualizujte okno prohlížeče. Pozadí by nyní mělo být oranžové.

Přidání a editace souborů

1. Vytvořte soubor s názvem typography.scss uvnitř src / scss.

2. Napište do něj například nějaký scss

@import url('https://fonts.googleapis.com/css?family=Roboto');
$base-font: 'Roboto';
$title-padding: 3em;
h1 {
 font-family: $base-font;
 padding: $title-padding;
}

3. Přejděte na adresu src / app.js a importujte typography.scss:

import './scss/typography.scss';

4. Aktualizujte prohlížeč. Je typografie nyní odlišná? Pak to funguje! 

#webpack #npm