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
webpack: bundle your whatever
By Gabriel Prates
webpack: bundle your whatever
- 1,197