Skip to content

Latest commit

 

History

History
302 lines (214 loc) · 8.86 KB

11.1.webpack.md

File metadata and controls

302 lines (214 loc) · 8.86 KB

Fyrirlestur 11.1

Webpack

Vefforritun 2 — HBV403G

Ólafur Sverrir Kjartansson, osk@hi.is

  • Webpack er notað til að þýða JavaScript modules
  • Leysir úr dependencies og safnar öllum notuðum kóða í eitt bundle
    • Bæði okkar eigin og úr NPM pökkum
  • Ekki bara kóði! Getur líka séð um CSS, myndir og allskonar
  • Getum notað import og require í kóða sem mun keyra á client
    • Webpack sér um að transpilea fyrir okkur þ.a. virki í öllum vöfrum
  • Uppsetning
    • npm install --save-dev webpack webpack-cli

src og dist

  • Þurfum að aðgreina á milli kóða og túlkunar frá webpack
  • Geymum kóða í src/ og túlkun í build/ eða dist/

Bundle

  • Bundle er JavaScript skrá sem inniheldur inngangspunkt í forritið okkar
  • Bootstrap kóði frá webpack og síðan allur notaður kóði í forriti
  • Oft eitt bundle en líka hægt að skipta upp með code-splitting

Webpack zero config

Frá og með webpack 4 þarf ekki að skilgreina config skrá

  • Skráum "build": "webpack" script í package.json og kóða í src/
    • Fáum út production útgáfu af bundle í dist/main.js
  • Skráum "dev": "webpack --mode development" script
    • Fáum út development útgáfu í dist/main.js

mode

  • mode er ný stilling í webpack 4 sem segir til um hvort webpack eigi við bundle
  • Stillum með production, development eða none
  • Sjálfgefið er mode: 'production'

Webpack config

  • Þegar við notum webpack setjum við yfirleitt upp einhverjar reglur um hvernig það á að virka
  • Söfnum saman í webpack.config.js
    • nafn er venja, ekki krafa
  • Keyrum með webpack --config webpack.config.js gegnum npm script
  • webpack config skrá er keyrð af node og verðum því að nota require þar

webpack.config.js

const path = require('path');

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

entry

  • entry er inngangspunktur eða inngangspunktar í forrit
    • Sjálfgefið gildi er src/
  • Webpack finnur dependencies útfrá þeim og útbýr dependency graph
  • Getum skilgreint sem
    • string, slóð á eina inngangspunktinn
    • object, lyklar skilgreina mismunandi inngangspunkta sem mun hver útbúa sérstakt dependency graph
    • array, fylki af strengjum og/eða hlutum

output

  • output skilgreinir hvar bundles eru búnir til
    • Sjálfgefið gildi er dist/
  • Skilgreinum sem hlut með
    • filename, nafn á bundle, t.d. bundle.js
    • path, absolute slóð á möppu sem skrifa á í
  • Ef við höfum marga inngangspunkta þurfum við að skilgreina filename með substitution, t.d. [name].js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    a: './src/a.js',
    b: './src/b.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

NPM pakkar

  • Við getum sótt NPM pakka og vísað í þá úr forritum og webpack mun skilja og bæta við bundle
  • Stundum eru þessir pakkar mjög stórir, þurfum að passa upp á að forritið okkar blási ekki út
  • Webpack hefur tree shaking reiknirit sem reynir að losa í burtu ónotaðan kóða
    • Fer eftir pökkum hvort það virki rétt, þarf að passa, t.d. fyrir lodash

Loaders

  • Með loaders getum við látið webpack virka með fleiri skrám en bara JavaScript
  • Loader breytir skrá í módul sem webpack skilur og getur sett í dependency graph
    • Getum gert import 'styles.css' sem annars er óskilgreind hegðun
  • Loader er skilgreindur í hlut með test og use lykla

Loaders – test

  • test segir til um hvort skrá eigi að vera meðhöndluð af þessum loader eða ekki
  • string fyrir nákvæma slóð
  • RegExp fyrir t.d. allar css skrár, test: /\.css$/
  • array fyrir mörg tilvik
  • function og object líka stutt
  • Ef við viljum sleppa eða aðeins leita á ákveðnum stöðum getum við sett include og exclude lykla á loader

Loaders – use

  • use skilgreinir loader eða loadera sem nota á, skilgreinum síðan með
  • string ef við vísum beint í loader
  • object ef við viljum stilla frekar, setjum þá loader í 'loader', stillingar í 'options'
  • array ef við viljum að fleiri en einn loader keyri, keyra í skilgreindri röð
  • Við notum ekki require eða import á loader, ef búið er að sækja loader í NPM er hægt að vísa í hann í config
    • npm install --save-dev style-loader og vísum í með 'style-loader'
module: {
  rules: [
    {
      test: /\.css$/,
      include: './src',
      use: [
        'style-loader',
        { loader: 'css-loader', options: {} },
      ],
    }
  ]
}

CSS

File-loader

  • file-loader leyfir okkur að sækja skrár og nota
  • Sækir skrá og setur í output möppu með hash nafni og viðeigandi endingu
    • t.d. /src/file.png verður /dist/0dcbbaa7013869e351f.png
  • Getum notað fyrir allskonar skrár, sjá Webpack: Asset Management

Plugins

  • Plugins eru leið til að auka við virkni webpack
  • Skráum í fylki undir plugins
  • Geta átt við hluti á öllum stigum ferils
  • Webpack teymi heldur úti slatta og mikið til á NPM

HtmlWebpackPlugin

  • HtmlWebpackPlugin útbýr index.html skrá fyrir okkur
  • Vísar rétt í þá bundles sem búnir eru til
  • Getum líka skaffað template og injectað í það

clean-webpack-plugin

  • clean-webpack-plugin sér um að hreinsa dist/
  • Hreinsar allt út úr möppu áður en við buildum
  • Ætti ekkert að vera þar inni sem ekki verður til í build skrefi
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin()
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Webpack og þróun

  • Webpack hefur tól til að hjálpa okkur við þróun
  • Source maps geta verið stillt með devtool
  • Ef við keyrum webpack --watch fylgist webpack með öllum skrám í dependency graph og rebuildar ef eitthvað breytist

webpack-dev-server

  • webpack-dev-server tekur þetta einu skrefi lengra og býr til vefþjón sem endurhleður síðu eftir rebuild
  • Mikið af stillingum...
  • Keyrum upp gegnum npm script:
    • "dev": "webpack-dev-server --open"
  • Keyrir allt í minni svo við sjáum hluti ekki verða til í dist/

Eject!

Eject

  • Þegar við keyrum npm run eject í create-react-app verkefni eru öll config færð í rót verkefnis
  • src/ mappa er látin vera
  • Notar webpack en líka sérsmíðuð script til að gera upplifun betri
  • Mjög góðar athugasemdir í kóða sem er alveg þess virði að lesa í gegnum til að læra betur á

Næstu skref í React

  • Server-side rendering
    • Hvernig getum við skrifað út HTML á server?
  • Hot reloading á components
  • Code-splitting
    • Hvað gerist þegar verkefnið verður stærra?
  • Margt, margt fleira

Starter kits