Compartir tecnología

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

Ingeniería front-end: guía de configuración de Webpack

Amigos del front-end, hoy vamos a hablar sobre el Webpack que la gente ama y odia. Sí, es la herramienta de compilación que está configurada para hacerte querer destrozar tu teclado, pero no puedes vivir sin ella. ¡No te preocupes, sígueme y te garantizo que pasarás de ser un novato en Webpack a un maestro de la configuración!

¿Qué es el paquete web?

En pocas palabras, Webpack es una herramienta de empaquetado de módulos estáticos para aplicaciones JavaScript modernas. Cuando Webpack procesa una aplicación, crea internamente un gráfico de dependencia que asigna cada módulo requerido por el proyecto y genera uno o más paquetes.

¿Suena elevado? De hecho, es para organizar y empaquetar sus archivos de código desordenados en archivos que el navegador pueda entender y ejecutar. Es como una señora de la limpieza súper trabajadora que mantiene en orden toda la ropa, los libros y los juguetes de tu casa.

Configuracion basica

Primero, echemos un vistazo a la configuración básica de Webpack.Crearwebpack.config.js Archivo, esta es nuestra base de configuración:

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

aquí,entry especifica el punto de entrada de la aplicación,output Le dice a Webpack dónde generar los paquetes que crea y cómo nombrar estos archivos.

Cargador: permita que Webpack comprenda varios archivos

El propio Webpack solo comprende archivos JavaScript y JSON. Los cargadores permiten a Webpack procesar otros tipos de archivos y convertirlos en módulos válidos para que los utilicen las aplicaciones.

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

¿Has visto? Le decimos a Webpack: "Oye, hermano, usa el cargador de estilos y el cargador css para procesar archivos .css, y usa el cargador de archivos para procesar imágenes".

Complementos: la magia de Webpack

Los complementos son la columna vertebral de Webpack. Se pueden utilizar para manejar una variedad de tareas, desde optimización y compresión de paquetes hasta redefinir variables en el entorno.

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

Aquí usamos CleanWebpackPlugin para limpiar /dist carpeta y HtmlWebpackPlugin para generar un archivo HTML. Es como instalar dos asistentes derechos para Webpack, uno responsable de la limpieza y otro responsable de decorar la habitación.

Modo: ¿desarrollo o producción?

El paquete web proporciona mode Opciones de configuración que le indican a Webpack que use las optimizaciones integradas para el modo correspondiente:

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

Cuando se configura en "producción", Webpack habilitará automáticamente una serie de complementos de optimización, como la compresión de código JS. El modo "desarrollo" se centra en construcciones rápidas y una gran experiencia de desarrollo. Es como ponerse dos sombreros para Webpack, uno es un sombrero de trabajo y el otro es un sombrero de vacaciones.

Servidor de desarrollo: la emoción de las actualizaciones calientes

Utilice webpack-dev-server para proporcionar un servidor web simple que se pueda recargar en tiempo real:

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

Después de esta configuración, si modifica el código, el navegador se actualizará automáticamente. ¡Es como ponerle un turbo a tu proceso de desarrollo!

Separación de códigos: no pongas todos los huevos en la misma cesta

La división de código es una de las características más atractivas de Webpack. Le permite dividir su código en varios paquetes, que luego se pueden cargar bajo demanda o en paralelo.

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

Esta configuración le dice a Webpack: "Oye, ayúdame a extraer el código común y empaquetarlo por separado". Esto puede evitar la carga repetida de módulos y reducir el tamaño del paquete principal. Es como volver a hacer la maleta y poner los elementos de uso frecuente donde sean más accesibles.

Sacudida de árboles: sacudir el exceso de ramas y hojas

Tree Shaking es un término comúnmente utilizado para describir la eliminación de código sin referencia dentro de un contexto de JavaScript.

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

Esta configuración habilitará automáticamente Tree Shaking en modo de producción. Analizará su código para descubrir qué código no se utiliza y luego "podará" estos códigos inútiles como un jardinero podando árboles.

Resumir

Bien, después de todo este juego, deberías tener un conocimiento completo de la configuración de Webpack. Desde la configuración básica hasta las funciones avanzadas, cubrimos las funciones principales de Webpack. Recuerde, Webpack es como una poderosa navaja suiza y usarlo correctamente puede mejorar en gran medida la eficiencia del desarrollo y el rendimiento de la aplicación.

Por supuesto, el mundo de Webpack es mucho más que eso. Hay funciones más avanzadas esperando que las explore, como carga diferida, precarga, almacenamiento en caché, etc. Sin embargo, después de dominar estos conceptos básicos, ya podrá decir con orgullo: "¡También soy un maestro de configuración de Webpack!"

Finalmente, no olvide consultar la documentación oficial de Webpack con frecuencia. Porque en el cambiante mundo del front-end, lo que ayer era una buena práctica puede estar obsoleto hoy. Continúe aprendiendo y explorando y podrá avanzar cada vez más en el camino hacia la ingeniería front-end.

¡Ahora, toma tu teclado y comienza tu viaje de configuración de Webpack! Recuerde, cada error es un trampolín en su camino hacia convertirse en un maestro. ¡Vamos, golpea a los trabajadores!

Mini programa de entrevistas a Haima

Incluye el intercambio de experiencias de entrevistas más recientes, análisis de preguntas de entrevistas reales, un banco completo de más de 2000 preguntas y explicaciones detalladas de los manuales técnicos de entrevistas de front-end y back-end, ya sea que esté entrevistando para reclutamiento escolar o reclutamiento social o lo desee; Para mejorar tus habilidades de programación, puedes afrontarlo con calma ~

de un adoquín. ¡Vamos, golpea a los trabajadores!

Mini programa de entrevistas a Haima

Incluye el intercambio de experiencias de entrevistas más recientes, análisis de preguntas de entrevistas reales, un banco completo de más de 2000 preguntas y explicaciones detalladas de los manuales técnicos de entrevistas de front-end y back-end, ya sea que esté entrevistando para reclutamiento escolar o reclutamiento social o lo desee; Para mejorar tus habilidades de programación, puedes afrontarlo con calma ~

[Las imágenes del enlace externo se están transfiriendo...(img-LBHUGtbe-1720689041341)]