webpack: bundle your whatever

bundle your WHATEVER

webpack

é um

bundler de módulos estáticos

que cria um

gráfico de dependências

que mapeia todos os

módulos

que teu projeto precisa

módulos

qualquer coisa que seja importada e processada por um loader

ES2015 import
CommonJS require()
AMD define e require
@import dentro de arquivos de estilo (css, sass, etc)
Arquivos de imagens (url(...) ou <img src="...">)

core concepts

entry

indica qual módulo o webpack deve usar para começar a criar seu gráfico de dependências interno

module.exports = {
    // string » default: './src/index.js'
    entry: "./app/module.js",
    
    // Array<string>
    entry: ["./app/module_1.js", "./app/module_2.js"],
    
    // {[name: string]: string | Array<string>}
    entry: {
        a: "./app/module_a.js",
        b: ["./app/module_b1.js", "./app/module_b2.js"]
    }
}

output

diz para o webpack onde colocar os bundles criados e como nomear esses arquivos

const path = require("path");

module.exports = {
    output: {
        // string » default: "main.js"
        filename: "bundle.js",


        // string » default: "./dist"
        path: path.resolve(__dirname, "static"),
    }
}

loaders

por padrão, o webpack só entende arquivos

JavaScript e JSON

os loaders permitem que o webpack processe outros tipos de arquivos e os converta em módulos que a aplicação possa consumir

module.exports = {
    module: {
        // Array<{
        //     test: RegExp,
        //     use: string | object | Array<string | object>
        // }>
        rules: [
            {
                test: /\.jsx?$/,
                use: "babel-loader",
            },
            {
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
                test: /\.(s[ca]|c)ss$/,
            },
            {
                test: /\.woff$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]"
                        }
                    }
                ]
            }
        ]
    }
}

plugins

são utilizados para personalizar o processo de build com tarefas como otimização, extração de arquivos, injeção de variáveis de ambiente, etc.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Array<{ /* plugin */ }>
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      apiURL: process.env.API_URL || "localhost:3000"
    })
  ]
};

instalação e configuração

pacotes

dependências de desenvolvimento:

// package.json

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

projeto
├── dist
│   └── index.html
├── package.json
├── package-lock.json
├── src
│   └── index.js
├── webpack.config.js
└── node_modules
    └── infinito e além

<!DOCTYPE html>
<html>
  <head>
    <title>webpack - building a project</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

dist/index.html

document.body.innerHTML = "webpack!";

src/index.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  }
};

webpack.config.js

{
  "name": "projeto",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "./node_modules/.bin/webpack --config webpack.config.js"
  },
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

package.json