Skip to content

webpack.md

Latest commit

 

History

History
136 lines (109 loc) · 7.92 KB

webpack.md

File metadata and controls

136 lines (109 loc) · 7.92 KB

Övningar - Webpack

Förarbete

Läs igenom Concepts @ webpack.js.org och gå igenom frågorna med en kurskamrat. Antingen skriftligt eller muntligt. Kolla av svaren med lärare när ni känner er klara. Gå sedan vidare till att praktiskt implementera er egen webpack-konfiguration. Svar på frågorna och övningar finns längre ner i dokumentet.

Frågor att besvara innan du konfigurerar

  1. Vad löser webpack för problem? Varför behöver vi det?
  2. Hur skiljer sig webpack från t.ex. gulp? Tänk följande scenario: Du har ES6-kod som ska konverteras med babel samt .scss som ska konverteras till .css. Varför använda webpack framför gulp t.ex.?
  3. Hur defineras en modul av webpack? Och hur definierar nodejs en modul. Beskriv med egna ord.
  4. Det mesta kan man göra med webpacks Four Core Concepts: Input, Output, Loaders & Plugins. Input & Output hör man vad det är, men vad är Loaders & Plugins och vad skiljer de åt?
  5. Friare fråga: Vad är det som gör att så många väljer webpack framför andra alternativ? Och varför går vi igenom det? Task Runner/Module Bundler Poll @ Kodapor

Praktiska övningar

  1. Skapa en minimal webpack-konfiguration från scratch. För att bara få det att fungera behöver du enbart entry samt output. Du ska konvertera en src-fil till en färdig bundle.js-fil som innehåller all din kod.
  2. Implementera så att du kan använda dig utav .css och importera .css i din applikation. Du behöver style-loader samt css-loader. Extra: lägg även till så att du köra köra sass, ta reda på själv hur det ska implementeras.
  3. Implementera så att du kan använda dig utav babel i din applikation och använda dig utav ES6-kod. Instruktioner finns på babel-loader @ GitHub
  4. Använd import samt export för att hantera dina .js-filer. Skapa en till valfritt namngiven fil. Skapa sedan ett valfritt objekt och en valfri funktion i den nya filen. Exportera objektet och funktionen från filen och importera dem i din app.js. Få det att fungera som att de låg i samma fil.
  5. Vad är det för skillnad på de här två sätten att importera:
import obj from './secondFile.js';
import { obj } from './secondFile.js';
  1. Relaterat till ovan, Vad är det för skillnad på de här 3 sätten att exportera:
export function logOutput(output){
  console.log(output);
}
function logOutput(output){
  console.log(output);
}

export { logOutput }
function logOutput(output){
  console.log(output);
}

export default logOutput

Extra

När du är klar med övningarna ovan så kan du och en kurskamrat (eller om ni är 3-4) gå igenom denna boilerplate nedan. Vad gör de olika pluginsen och varför behövs dem? Läs dokumentationen för de olika pluginsen och dependecies som jag har använt i denna boilerplate och diskutera om det är något som är överflödigt. Varje plugin har en egen GitHub-sida. Finns det några bra plugins eller regler som saknas?

På rad 54-56 gör configen något speciellt. Vad menas med dessa rader? Varför finns de?

Facit

Svar på frågorna

  1. webpack vill förenkla sättet som tillgångar (css, scss, javascript, typescript, es6 etc.) paketeras och optimeras för att kunna levereras över webben. Den utför olika konverteringar om det behövs så som .scss -> .css och sköter oftast automatiskt miniferingen av dessa tillgångar.
  2. Skillnaden ligger delvis i hur webpack hanterar sina tillgångar, webpack behandlar allt som en modul och förstår enbart .js. Så om man t.ex. inte definierar att ens .scss ska läggas i en separat .css-fil så kommer den att bakas in i vår .js-fil, på gott och ont.
  3. Liknande som när vi jobbade med Revealing Module Pattern så vill vi dela upp vår kod så att koden hamnar i separata namespaces. Detta för att undvika globala variabler och funktioner. I node är varje enskild fil en egen module by default vilket gör att man måste explicit exportera och importera det man behöver i varje fil. Webpack hanterar moduler på liknande sätt. Varje modul är en dependency, något vi behöver för att koden ska fungera. Men vi vill inte ha all kod tillgänglig överallt därför importerar vi koden explicit när vi behöver den. Eftersom webpack ska hantera en rad olika resurser så behandlar den allting som en modul. En .css-fil kan vara en modul som måste importeras, dock är detta inget som JavaScript kan, därför paketerar webpack denna modul åt oss så att den går att använda i JavaScript.
  4. Loaders tar han om att leta efter filer av en viss typ och filändelse och sedan konvertera denna fil med hjälp av vald loader. Vill vi använda .css i webpack så använder vi css-loader som letar efter filer med filändelsen och applicerar rätt konvertering så att vi kan använda koden i vår applikation. babel-loader är t.ex. den loadern som har hand om att konvertera JavaScript-kod från t.ex. ES6 till ES5 eller äldre. Samma som med gulp. Plugins är allting annat som inte hör till ovannämnda. Oftast vill man göra en del andra automatiserade uppgifter som inte hör till just konverterandet nämnt ovan. Varje gång man bygger sin produktionkod vill man ta bort den gamla builden så att inget oväntat händer med de gamla filerna. Då använder man pluginen clean-webpack-plugin. Pluginen har egentligen bara uppgiften att ta bort mappen som vi bygger till innan varje ombyggning.
  5. Rent krasst så går vi genom det för att verktyget create-react-app som vi ska använda under kursens gång samt React i stort använder webpack. Sen är det ett bra verkyg såklart.

Lösningsförslag på praktiska övningar

const config = {
  entry: {
    app: './app.js',
  },
  output: {
    filename: 'bundle.js',
  }
}

module.exports = config;
const config = {
  entry: {
    app: './app.js',
  },
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/, //regex for `.css`-file
        use: ["style-loader", "css-loader"] //style injects a <style>-tag, css-loader injects css, both needed
      }
    ]
  }
}
const config = {
  entry: {
    app: './app.js',
  },
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [ //rules is an array of tests
    {
      test: /\.js$/, //regex for all *.jx* files
      use: {
        loader: 'babel-loader',
        options: { //extra options on how to transpile
          presets: ['env'] //env is like autoprefixer but for babel
        }
      }
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
    ]
  }
}
  1. Första import importerar det som är exporterat som default från den andra filen. Den andra import importerar obj som inte är exporterat som default, därför måste det heta samma sak i båda filerna. När du importerar default kan du döpa om importen som du vill.
  2. Första exporten exporterar utan default vilket betyder att man måste importera med import { logOutput } from './file.js';. Den andra exporten gör samma sak förutom att vi har lagt det på en separat rad. Det händer ändå samma grej. Man får välja vilken syntax man föredrar. Den tredje exporten exporterar som default vilket betyder att om vi skriver import logOutput from './file.js' så kommer den funktionen automatiskt importeras. Om vi inte har brackets så väljer import default-exporten. Vi kan ha både default och vanliga export i samma fil, men bara EN defult.