Webpack

Webpack er en module builder. Denne bliver brugt da moderne javascript applicationer har mange forskellelige moduler som er afhængige af hinanden.

Webpacks bygger en dependency graph der sørge for kun at loade de dependencies du har brug for i dit system. Dette gør at en udvilker kan bygge store komplekse javascript filer uden at skulle tænke på om clienten bliver langsom pga. bottlenecks. Ud over dette sørger Webpack for at typescript filer kan udnytte javascript bibloteker uden at skulle bruge delaration filer.

Opsætningen af en simpel webpack består af 3 dele. Entry, Output og Loaders.

Start med at lave en npm install

• npm install -D -E ts-loader@5.3.3 typescript@3.3.3 webpack@4.29.3 webpack-cli@3.2.3
• Kan undlade typescript bibloteket hvis dette allerede er installeret på programmet

Start med at oprette en filen “webpack.confiq.js”

const path = require("path");

module.exports = {
    entry: {
        
    },

    output: {
        path: path.resolve(__dirname, "wwwroot/src"),
        filename: "[name].bundle.js",

    },
    resolve: {
        extensions: [".js", ".ts"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            }
        ]
    }
    
}

*Entry : de .ts filer der skal laves til .js filer. Her indsætter du stien hvorpå den enkelte fil ligger med ‘,’ som splitter. *Output : Hvor dine endelige bundles ender, oven for vil filerne ende i wwwroot/src mappen med et navn vi har givet dem .bundle.js. fx chat.bundle.js. *loaders sørger for at lave den oiginale fil om til det vi gerne vil have det. fx ts-loader laver .ts filen om til .js og hælper den på vej hvis der er mindre fejl der opstår.

Hvad vi mangler nu er blot at fortælle hvilke typescript filer vi gerne vil have lavet bundels på Dette gøres :

 entry: {
        chat: "./Webresources/Chat.ts",
        test: "./Webresources/apitest.ts",
        create: "./Webresources/createRequest.ts",
        sidepanel: "./Webresources/sidePanel.ts",
        login: "./Webresources/Login.ts"
    },

Hvis ikke du allerede har en package.json så tilføj denne nu. og erstat “scripts” med :

"scripts": {
  "build": "webpack --mode=development --watch",
  "release": "webpack --mode=production",
  "publish": "npm run release && dotnet publish -c Release"
},

Dette sørger for at bygge og bundles vores typescript filer.

Du kan nu køre kommandoen :

npm run release

som vil bygge dine webpack og ligge dem i den mappe du har angivet.