Trabalhando com Webpack

O que é Webpack?

De maneira simples, Webpack é um empacotador de módulos para aplicações javascript. O Webpack permite a você escrever módulos e empacotar todos eles em um ou mais pacotes. Além do javascript, ele também pode incluir outros tipos de arquivos como css, font, image, HTML, e etc. e em seguida transformá-los no formato aceitável do webpack.

Instalando e configurando

• Instalar o npm.

1
apt-get install npm

• Inicia o package.json. O parâmetro -y pula as perguntas de criação do arquivo.

1
npm init -y

• Instalar o Webpack

1
npm install webpack webpack-cli --save-dev

• Criar o arquivo webpack.config.js É nesse arquivo que é feito todas as configurações de entrada, saída e adição de plugins utilizados. Neste caso, irei configurar o uso para scss (SASS) e javascript. Crie o arquivo webpack.config.js na raiz do projeto com esse conteúdo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //plugin para exportar o css

module.exports = {
    mode: "development",
    entry: {
        app: path.resolve(__dirname, 'path/to/entry.js') // caminho para a entrada do arquivo JS
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'path/to/output') // caminho para a pasta em que os arquivos serão exportados
    },
    plugins: [new MiniCssExtractPlugin()], // plugin para extrair o CSS
    module: {
        rules: [
            { // essa regra define que, para todo arquivo com a extensão .scss ou sass, serão usado os esses modulos para exportar esses arquivos.
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    }
};

• Temos que instalar os loaders e plugins necessários para essa configuração funcionar:

loaders CSS:

1
npm install --save-dev style-loader css-loader

loaders SASS:

1
npm install --save-dev sass-loader sass

plugin que extrai o CSS. Os loaders de sass compilam o css dentro do arquivo .js. Esse plugin extrai o build do sass e o colocam em um arquivo css minificado:

1
npm install --save-dev mini-css-extract-plugin

Concluindo

Com isso o Webpack está devidamente configurado. Só falta criar os arquivos que deverão ser compilados pelo Webpack. Para executar o webpack basta rodar o comando:

1
npx webpack

Como bonus, criei um dentro do arquivo package.json um alias para executar o webpack:

1
2
3
4
"scripts": {
    "test": "test",
    "start": "npx webpack"
  },

Disponibilizei também um projeto no github que põe em prática esse cookbook.