yarn add webpack webpack-cli -D
se você estiver usando o gerenciador de pacotes yarn
npm i webpack webpack-cli --save-dev
, para o gerenciador de pacotes
npm , o Webpack é configurado usando o arquivo de configuração
webpack.config.js
, que está armazenado no diretório raiz do projeto.
Um exemplo de arquivo de configuração:
const path = require('path')
module.exports = {
watch: true,
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname,'build'),
publicPath: "/"
}
};
A configuração inicial é a seguinte:
- watch - faz o webpack observar as mudanças nos arquivos e reconstruir;
- entrada - indica o ponto de entrada para o projeto e onde começar a construir o gráfico das dependências internas do projeto;
- saída - especifica o caminho onde o arquivo criado será localizado e como será nomeado;
Você também precisa instalar o webpack-dev-server, necessário para desenvolver e depurar o aplicativo.
yarn add webpack-dev-server
para o gerenciador de pacotes yarn ou
npm i webpack-dev-server
se estiver usando npm
Para configurar o webpack-dev-server adicione devServer em nosso arquivo de configuração.
Parâmetros para webpack-dev-server:
module.exports = {
//...
devServer: {
port: 8000,
historyApiFallback: true,
hot: true,
},
};
Também precisamos adicionar / substituir o script de inicialização do projeto em nosso arquivo package.json:
"start": "webpack-dev-server --mode development",
e um script para construir a construção:
"build": "webpack --mode production"
Bootloaders
Carregadores são módulos especiais usados para "carregar" outros módulos. Eles também permitem que você pré-processe arquivos à medida que são importados ou "carregados".
Os carregadores podem converter arquivos como TypeScript em JavaScript, sass em css. Eles podem até nos permitir fazer coisas como importar arquivos CSS e HTML diretamente para nossos módulos JavaScript. Para usá-los, você precisa registrar os carregadores necessários na seção module.rules do arquivo de configuração.
Exemplos de carregador:
- babel-loader - usa o babel para carregar arquivos ES2015.
- carregador de arquivos - para carregar vários arquivos (imagens, faixas de música, etc.) no diretório de saída
- style-loader - usado para carregar estilos
- css-loader - permite carregar arquivos de estilo
- @ svgr / webpack - um carregador que permite que você use imagens svg como elementos jsx
Para usar o babel-loader você precisa instalarbabel/ core . Também instale a predefiniçãobabel/ preset-env , que compila ES2015 + para ES5 detectando automaticamente os plug-ins e polyfiles necessários do Babel. Em seguida, crie um arquivo .babelrc e adicione a predefinição instalada anteriormente a ele.
{
"presets": [
"@babel/preset-env"
]
}
Agora vamos adicionar um carregador à nossa configuração para converter arquivos Javascript. Isso nos permitirá usar a sintaxe ES2015 + em nosso código (que será automaticamente convertido para ES5 na compilação final).
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
Exemplo de configuração com carregador de arquivos
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
Exemplo de configuração para o carregador @ svgr / webpack
{
test : /\.(svg)$/,
use: [
{
loader: "@svgr/webpack"
}
]
}
Plugins
Os plug-ins são a espinha dorsal do webpack, pois essencialmente todo o seu trabalho é construído no sistema de plug-ins. Eles expandem muito as capacidades dos bootloaders.
Os carregadores realizam o pré-processamento de arquivos de qualquer formato. Eles funcionam no nível de arquivos individuais durante ou antes da criação do pacote. Depois que os carregadores são concluídos, os plug-ins viram. Normalmente, os plug-ins executam apenas uma função.
Para usá-los, você precisa adicionar os plug-ins necessários na seção de plug - ins do arquivo de configuração.
Exemplos de plug-ins:
- html-webpack-plugin - usado para gerar arquivos html
- copy-webpack-plugin - Copia arquivos individuais ou diretórios inteiros que já existem para o diretório de construção.
- definePlugin - permite que você crie constantes globais
- HotModuleReplacementPlugin - ativa o modo HMR, atualiza apenas a parte que foi alterada, sem recarregar completamente o aplicativo.
Exemplo de configuração com plug-ins adicionados:
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new CopyWebpackPlugin({
patterns: [
{ from: './public/favicon.ico', to: './public'}
]
}),
],
Também adicionaremos o plugin UglifyjsWebpackPlugin, que minimiza o código js, para isso você precisa instalar o plugin uglifyjs-webpack-plugin e adicioná-lo na seção de otimização
optimization: {
minimizer: [new UglifyJsPlugin()]
},