Noções básicas de configuração do Webpack

Primeiro, instale o webpack, isso é feito usando os comandos:



yarn add webpack webpack-cli -Dse 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-serverpara o gerenciador de pacotes yarn ou

npm i webpack-dev-serverse 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()]
},



All Articles