Configuração do Webpack §

---

1. Iniciar um projeto Node: §

$ npm init -y

2. Instalar os pacotes necessários (Babel e Webpack): §

$ npm i --save-dev @babel/preset-env @babel/cli @babel/core babel-loader webpack webpack-cli regenerator-runtime core-js@2

3. Criar o arquivo de configuração do Webpack: §

Nota

O nome do arquivo precisa ser igual a webpack.config.js e deve estar no diretório raiz do projeto.

1. Importar o módulo path do CommonJS: §

const path = require('path');

2. Exportar o objeto de configuração do Webpack: §

module.exports = {
	// ...
}

Propriedades do objeto de configuração do Webpack:

• mode: especificar o modo de trabalho: development ou production

• entry: especificar o caminho até o arquivo de entrada da aplicação. Utilizar o caminho relativo ao informar o arquivo.

• output:

  • path: caminho até o diretório que será enviado o arquivo de saída (arquivo transpilado)

    • filename: nome do arquivo de saída

• devtool: especificar a ferramenta de desenvolvimento utilizada para fazer o mapeamento entre o código fonte e o arquivo transpilado (para depuração do código,)

• module

  • rules: especificar as regras do módulo

    • exclude: especificar diretórios e arquivos que devem ser ignorados pelo webpack

    • test: especificar os arquivos/tipo do arquivo que serão transpilados

    • use:

      • loader: especificar o loader que deve ser usado pelo webpack

      • options:

        • presets: especificar o(s) presets

3. Definir o mode: §

module.exports = {
  mode: "production",
  // ...
}

4. Criar o arquivo de entrada da aplicação no diretório src/: §

Nota

No diretório src/ é armazena o código fonte da aplicação.

5. Definir o entry: §

module.exports = {
  entry: "./src/index.js",
  // ...
}

6. Definir as propriedades path e filename do objeto output: §

module.exports = {
  output: {
	path: path.resolve(__dirname, "public", "assets", "js"),
	filename: "bundle.js",
  },
  // ...
}

Nota

__dirname é uma variável global que armazena o caminho absoluto até o diretório raiz do projeto.

7. Definir o devtool: §

module.exports = {
  devtool: "source-map",
  // ...
};

8. Definir as rules do module: §

module.exports = {
  module: {
	rules: [
	  {
		exclude: /node_modules/,
		test: /\.js$/,
		use: {
		  loader: "babel-loader",
		  options: {
			presets: ["@babel/env"],
		  },
		},
	  },
	],
  },
  // ...
};

9. Após ter realizado todas as etapas anteriores, o arquivo webpack.config.js deve estar da seguinte forma: §

const path = require("path");
 
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
	path: path.resolve(__dirname, "public", "assets", "js"),
	filename: "bundle.js",
  },
  module: {
	rules: [
	  {
		exclude: /node_modules/,
		test: /\.js$/,
		use: {
		  loader: "babel-loader",
		  options: {
			presets: ["@babel/env"],
		  },
		},
	  },
	],
  },
  devtool: "source-map",
};

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado