Mis on Webpack ja milleks seda kasutatakse?

Webpack on staatiline moodulite kogumismootor kaasaegsete JavaScript rakenduste jaoks. See töötleb teie projekti faile (mooduleid) ja ühendab need ühte või mitmesse paketti (bundle), mida saab brauseris kasutada.

Webpacki peamised ülesanded ja eelised:

• Moodulite koostamine: Ühendab kõik projekti sõltuvused (JavaScript, CSS, pildid jne) optimeeritud failidesse. See võimaldab kasutada moodulipõhist lähenemist arenduses.
• Transpileerimine ja polyfillid: Loaderite abil saab muuta kaasaegset JavaScripti (ES6+) vanemateks standarditeks (ES5), mis on arusaadavad enamikule brauseritele, ning lisada polyfill-e uute API-de toetamiseks.
• Resursside haldamine: Võib töödelda mitte ainult JavaScripti, vaid ka teisi failitüüpe, nagu CSS (käsu css-loader, style-loader), pilte (asset/resource), fonte jms, ning neid kaasata paketti või luua eraldi faile.
• Optimeerimine: Pakub palju pluginaid (plugins) paketi suuruse optimeerimiseks, näiteks minimeerimine, tihendamine, kasutamata koodi eemaldamine (tree shaking).
• Koodi jagamine (Code Splitting): Võimaldab jagada paketti väiksemateks osadeks, mis laaditakse nõudmisel. See kiirendab rakenduse esialgset laadimist.
• Kohaliku mooduli asendamine (Hot Module Replacement - HMR): Võimaldab uuendada mooduleid töötavas rakenduses ilma kogu lehte uuesti laadimata, mis kiirendab arendusprotsessi.
• Sõltuvuste haldamine: Aitab tõhusalt hallata keerulist sõltuvusgraafikut projektis.

Näide põhikonfiguratsioonist (fail webpack.config.js):

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Sisenemispunkt
  output: {
    filename: 'bundle.js', // Väljundpaketi nimi
    path: path.resolve(__dirname, 'dist'), // Väljundfailide kaust
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Reegel .js failidele
        exclude: /node_modules/, // Välista node_modules kaust
        use: {
          loader: 'babel-loader', // Kasutada babel-loader transpilatsiooniks
        },
      },
      {
        test: /\.css$/, // Reegel .css failidele
        use: [
          'style-loader', // Lisa CSS DOM-i
          'css-loader',   // Töötle CSS-i
        ],
      },
    ],
  },
  plugins: [
    // Täiendavad pluginad (näiteks minimeerimiseks, failide kopeerimiseks)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Lülita sisse tihendus
    port: 9000, // Dev serveri port
  },
};

Webpack on muutunud de facto standardiks kaasaegsete veebirakenduste ehitamisel, eriti React, Vue ja Angular raamistike ning teekide kasutamisel.