Lastere i Webpack

For å utvide mulighetene til Webpack brukes også lastere. De gjør det mulig å ta filer av en bestemt type og utføre visse operasjoner med dem.

For eksempel kan man ta alle filer med endelsen .less, transformere teksten deres til CSS, deretter minimere den resulterende CSS-en og lagre den i én felles fil.

La oss se på den generelle oppskriften for arbeid med en laster ved å bruke eksempelet på to tenkte lastere.

La oss installere den første lasteren:

terminalnpm install test-loader1 --save-dev

La oss installere den andre lasteren:

terminalnpm install test-loader2 --save-dev

Etter installasjon av lastere kan vi bruke dem i konfigurasjonsfilen (du trenger ikke å importere dem). Se syntaksen:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // filtype
        use: ['test-loader1', 'test-loader2'], // lastere
      },
    ],
  },
};

Elementene i arrayet kan skrives ikke på rad, men i kolonne:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
    ],
  },
};

For forskjellige filtyper kan man skrive forskjellige regler:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.sass$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'test-loader3',
          'test-loader4'
        ],
      },
    ],
  },
};