Laaiers in Webpack

Om Webpack se vermoëns uit te brei word laaiers ook gebruik. Hulle laat toe om lêers van 'n sekere tipo te neem en sekere operasies daarmee uit te voer.

Byvoorbeeld, jy kan alle lêers met die uitbreiding .less neem, hul teks na CSS omskep, dan die verkrygde CSS minimeer en in een algemene lêer stoor.

Laat ons kyk na die algemene skema vir werk met 'n laaier aan die hand van die voorbeeld van twee denkbeeldige laaiers.

Laat ons die eerste laaier installeer:

terminalnpm install test-loader1 --save-dev

Laat ons die tweede laaier installeer:

terminalnpm install test-loader2 --save-dev

Na die installering van die laaiers kan ons hulle gebruik in die konfigurasielêer (om hulle in te voer is nie nodig nie). Kyk na die sintaksis:

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

Die elemente van die skikking kan nie in 'n string geskryf word nie, maar in 'n kolom:

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

Vir verskillende tipes lêers kan jy verskillende reëls skryf:

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'
        ],
      },
    ],
  },
};