Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Engenharia front-end: guia de configuração do Webpack

Amigos front-end, hoje vamos falar sobre o Webpack que as pessoas amam e odeiam. Sim, é a ferramenta de construção configurada para fazer você querer quebrar seu teclado, mas você não pode viver sem ela. Não se preocupe, siga-me e garanto que você passará de um novato em Webpack a um mestre em configuração!

O que é Webpack?

Simplificando, Webpack é uma ferramenta de empacotamento de módulo estático para aplicativos JavaScript modernos. Quando o Webpack processa um aplicativo, ele constrói internamente um gráfico de dependência que mapeia cada módulo exigido pelo projeto e gera um ou mais pacotes configuráveis.

Parece elevado? Na verdade, é para organizar e empacotar seus arquivos de código confusos em arquivos que o navegador possa entender e executar. É como uma faxineira super trabalhadora que mantém todas as roupas, livros e brinquedos da sua casa em ordem.

Configuração básica

Primeiro, vamos dar uma olhada na configuração básica do Webpack.Criarwebpack.config.js Arquivo, esta é a nossa base de configuração:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
1
2
3
4
5
6
7
8
9

aqui,entry especifica o ponto de entrada do aplicativo,output Informa ao Webpack onde gerar os pacotes que ele cria e como nomear esses arquivos.

Loader: permite que o Webpack entenda vários arquivos

O próprio Webpack entende apenas arquivos JavaScript e JSON. Os carregadores permitem que o Webpack processe outros tipos de arquivos e os converta em módulos válidos para uso pelos aplicativos.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

você viu? Dizemos ao Webpack: "Ei, mano, use o style-loader e o css-loader para processar arquivos .css e use o file-loader para processar imagens."

Plug-ins: a magia do Webpack

Plugins são a espinha dorsal do Webpack. Eles podem ser usados ​​para lidar com uma variedade de tarefas, desde otimização e compactação de empacotamento até redefinição de variáveis ​​no ambiente.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '我的超酷网页',
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12

Aqui usamos CleanWebpackPlugin para limpar /dist pasta e HtmlWebpackPlugin para gerar um arquivo HTML. É como instalar dois assistentes destros para o Webpack, um responsável pela limpeza e outro responsável pela decoração do ambiente.

Modo: desenvolvimento ou produção?

Webpack fornece mode Opções de configuração que dizem ao Webpack para usar as otimizações integradas para o modo correspondente:

module.exports = {
  mode: 'production', // 或者 'development'
  // ...
};
1
2
3
4

Quando definido como ‘produção’, o Webpack ativará automaticamente vários plug-ins de otimização, como compactação de código JS. O modo 'desenvolvimento' concentra-se em construções rápidas e em uma ótima experiência de desenvolvimento. É como colocar dois chapéus para o Webpack, um é de trabalho e o outro é de férias.

Servidor de Desenvolvimento: A emoção das atualizações quentes

Use webpack-dev-server para fornecer um servidor web simples que pode ser recarregado em tempo real:

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
1
2
3
4
5
6
7

Após esta configuração, se você modificar o código, o navegador será atualizado automaticamente. É como colocar um turboalimentador no seu processo de desenvolvimento!

Separação de código: não coloque todos os ovos na mesma cesta

A divisão de código é um dos recursos mais atraentes do Webpack. Ele permite dividir seu código em vários pacotes, que podem ser carregados sob demanda ou em paralelo.

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
1
2
3
4
5
6
7
8

Esta configuração diz ao Webpack: "Ei, ajude-me a extrair o código comum e empacotá-lo separadamente." Isso pode evitar o carregamento repetido de módulos e reduzir o tamanho do pacote principal. É como arrumar a mala novamente, colocando os itens usados ​​com frequência onde são mais facilmente acessíveis.

Sacudir a árvore: sacudir o excesso de galhos e folhas

Tree Shaking é um termo comumente usado para descrever a remoção de código não referenciado em um contexto JavaScript.

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};
1
2
3
4
5
6

Esta configuração ativará automaticamente o Tree Shaking no modo de produção. Ele analisará seu código para descobrir qual código não é usado e, em seguida, “podará” esses códigos inúteis como um jardineiro podando árvores.

Resumir

Ok, depois de toda essa manipulação, você deve ter um entendimento abrangente da configuração do Webpack. Da configuração básica aos recursos avançados, abordamos as principais funções do Webpack. Lembre-se de que o Webpack é como um poderoso canivete suíço e usá-lo corretamente pode melhorar muito a eficiência do desenvolvimento e o desempenho do aplicativo.

Claro, o mundo do Webpack é muito mais do que isso. Existem recursos mais avançados esperando para você explorar, como carregamento lento, pré-carregamento, cache, etc. Porém, depois de dominar esses princípios básicos, você já pode dizer com orgulho: "Eu também sou um mestre em configuração de Webpack!"

Por fim, não se esqueça de verificar frequentemente a documentação oficial do Webpack. Porque no mundo do front-end em rápida mudança, o que era a melhor prática ontem pode estar desatualizado hoje. Continue aprendendo e explorando e você poderá ir cada vez mais longe no caminho da engenharia front-end.

Agora, pegue seu teclado e comece sua jornada de configuração do Webpack! Lembre-se de que cada erro é um trampolim no seu caminho para se tornar um mestre. Vamos, acerte os trabalhadores!

Miniprograma de entrevistas com Haima

Inclui o compartilhamento de experiência de entrevista mais recente, análise de perguntas reais de entrevistas, um banco completo de mais de 2.000 perguntas e explicações detalhadas de manuais técnicos de entrevistas de front-end e back-end, quer você esteja entrevistando para recrutamento escolar ou social ou queira; para melhorar suas habilidades de programação, você pode enfrentar isso com calma ~

de uma pedra de pavimentação. Vamos, acerte os trabalhadores!

Miniprograma de entrevistas com Haima

Inclui o compartilhamento de experiência de entrevista mais recente, análise de perguntas reais de entrevistas, um banco completo de mais de 2.000 perguntas e explicações detalhadas de manuais técnicos de entrevistas de front-end e back-end, quer você esteja entrevistando para recrutamento escolar ou social ou queira; para melhorar suas habilidades de programação, você pode enfrentar isso com calma ~

[As imagens do link externo estão sendo transferidas...(img-LBHUGtbe-1720689041341)]