Loaders

Webpack, par défaut, ne sait interpréter comme module uniquement du code JavaScript.

Pour que d'autres types de ressources (CSS, HTML, ...) puissent être utilisés comme module, il faut configurer des loaders dédiés.

La configuration module.rules précise les loaders pris en charge.

module.exports = {
  ...
  module: {
    rules: [ ... ]
  }
}

Exemple avec css-loader (à installer via npm install --save-dev css-loader).

module.exports = {
  ...
  module: {
    rules: [
        { test: /\.css$/, use: 'css-loader'}
    ]
  }
}

// Il devient alors possible de charger des fichiers CSS
require("./mon.fichier.css");

Configurer plusieurs loaders.

npm install --save-dev css-loader
npm install --save-dev ts-loader

module.exports = {
  ...
  module: {
    rules: [
        { test: /\.css$/, use: 'css-loader'},
        { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
}