Carregadores e plug-ins

Carregadores e plugins compõem os blocos de construção do Webpack.

Os carregadores geralmente são delegados a uma única tarefa e tipo de arquivo. Eles são mais fáceis de configurar e geralmente exigem menos código clichê.

Os plugins, por outro lado, têm acesso ao sistema de compilação interno do Webpack por meio de ganchos e, portanto, são mais poderosos. Os plug-ins podem modificar o ambiente Webpack totalmente configurado e podem executar ações personalizadas durante todo o processo de compilação.

Ao lidar com nossos arquivos CSS, por exemplo, um carregador pode ser usado para adicionar automaticamente prefixos de fornecedores às propriedades, enquanto um plug-in pode ser usado para produzir uma folha de estilo minificada no processo de construção do empacotador.

Introdução aos carregadores #

Para começar, npm install os carregadores desejados para o seu projeto.

Dentro do objeto de configuração que está sendo exportado em webpack.config.js, uma propriedade module conterá todos os seus carregadores.

const source = `${__dirname}/client/src/`;

module.exports = {
  // other settings here
  
  module: {
    loaders: [
          {
            test: /\.jsx?$/,
            include: source,
            loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
          },
          {
            test: /\.s?css$/,
            include: source,
            loaders: ['style', 'css', 'autoprefixer', 'sass']
          }
        ]
  },
};

Na configuração acima, estamos usando três configurações básicas para nossos carregadores:

• teste: É aqui que vinculamos os carregadores a extensões específicas usando o RegExp. O primeiro conjunto de carregadores está sendo executado em todos os arquivos .js e .jsx. O segundo conjunto está sendo executado em todos os arquivos .css e .scss.
• include: Este é o diretório em que queremos que nossos carregadores sejam executados. Opcionalmente, poderíamos facilmente usar a propriedade exclude para definir os diretórios que não queremos incluir.
• loaders: Esta é uma lista de todos os loaders que queremos executar nos arquivos especificados em test e include.

É importante observar que os carregadores são executados da direita para a esquerda em cada matriz de carregadores e de baixo para cima nas definições individuais. O código abaixo irá executar os loaders na seguinte ordem: sass, autoprefixer, css, style.

loaders: [
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['style', 'css', 'autoprefixer']
  },
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['sass']
  }
]

Esta é uma fonte comum de confusão e bugs para desenvolvedores que são novos no webpack. Por exemplo, ao usar a sintaxe JSX e ES6, queremos fazer o lint desse código, não o código compilado fornecido pelo nosso carregador babel. Portanto, nosso carregador eslint é colocado à direita do nosso carregador babel.

O sufixo -loader é opcional ao listar nossos carregadores.

loaders: ['sass']

… é equivalente a:

loaders: ['sass-loader']

Alternativamente, você pode usar a propriedade loader (singular) junto com uma string separando a lista de carregadores pelo caractere !.

loaders: ['style', 'css']

… é equivalente a:

loader: "style!css"

carregando arquivos typescript #

Para usar typescript com webpack você precisa de typescript e ts-loader instalados

npm --save-dev install typescript ts-loader

Agora você pode configurar o webpack para usar arquivos typescript

// webpack.config.js

module.exports = {
  ..
  resolve: {
    // .js is required for react imports.
    // .tsx is required for react tsx files.
    // .ts is optional, in case you will be importing any regular ts files.
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
        test: /\.tsx?$/,
        loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  ...
};