Neste guia, abordaremos a configuração de um ambiente de desenvolvimento com Webpack projetos que utilizam React. O foco está em estabelecer uma base sólida com loaders, plugins e ajustes essenciais.

Instalação das Dependências Necessárias

Primeiro, instale o core do Webpack e a interface de linha de comando como dependências de desenvolvimento:

npm install --save-dev webpack webpack-cli

Em seguida, adicione loaders para processar diferentes tipos de arquivos. Para estilos (CSS e SCSS):

npm install --save-dev style-loader css-loader sass-loader postcss-loader

Para transpilação de JavaScript e JSX, incluindo presets específicos para React:

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

Para manipulação de imagens e ativos, use loaders otimizados:

npm install --save-dev file-loader url-loader

Configuração de Plugins Fundamentais

Instale plugins para gerar HTML de saída e limpar a pasta de distribuição durante as compilações:

npm install --save-dev html-webpack-plugin clean-webpack-plugin

Para adicionar automaticamente prefixos CSS para compatibilidade entre navegadores, inclua o Autoprefixer:

npm install --save-dev autoprefixer

Ambientes de Desenvolvimento e Produção

Para o servidor de desenvolvimento, que permite hot-reloading:

npm install --save-dev webpack-dev-server

Em produção, é crucial extrair CSS para arquivos separados, evitando mistura com JavaScript:

npm install --save-dev extract-text-webpack-plugin@next

Para mesclar configurações comuns entre ambientes, utilize o webpack-merge:

npm install --save-dev webpack-merge

Arquivos de Configuração Específicos

O arquivo .babelrc define alvos de compatibilidade do navegador. Um exemplo configura para as últimas duas versões:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ]
}

O postcss.config.js integra o Autoprefixer com regras de compatibilidade:

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: [
        '> 1%',
        'last 2 versions',
        'not dead'
      ]
    })
  ]
};

Arquivo de Configuração Base do Webpack

Um arquivo webpack.base.conf.js contém configurações compartilhadas. Note a estrutura modificada e nomes de variáveis alterados:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const DIRECTORIES = {
  source: path.resolve(__dirname, '../src/index.js'),
  output: path.resolve(__dirname, '../dist')
};

module.exports = {
  entry: {
    main: DIRECTORIES.source
  },
  output: {
    filename: process.env.NODE_ENV === 'development' ? '[name].[contenthash:8].js' : 'assets/js/[name].[contenthash:8].js',
    path: DIRECTORIES.output,
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/template.html',
      inject: true
    }),
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: true
    })
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@components': path.resolve(__dirname, '../src/components')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        },
        generator: {
          filename: 'images/[hash:8][ext][query]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[hash:8][ext][query]'
        }
      }
    ]
  }
};

Após configurar, execute o comando de build para gerar a saída otimizada.