prefacio
Entendamos, ¿qué es exactamente webpack? ¿Por qué existe esta cosa? Principalmente, el desarrollo de nuestro proyecto en cualquier idioma dividirá el código de nuestro proyecto en muchos módulos para garantizar la capacidad de mantenimiento.En el modo de desarrollo vue front-end web, estos módulos de gestión son nuestro paquete web.
Por supuesto, esto también proporciona muchas otras funciones adicionales, siempre que tengamos una comprensión profunda, podemos saber que la ingeniería de front-end tiene que desarrollar el código detrás de él. Una breve lista de nuestras otras características adicionales:
1. ¿Qué es el paquete web?
¿Qué es un paquete web? Cuando estamos desarrollando nuestro proyecto, escribir código orientado a objetos dará lugar a un problema de inflar sus funciones, es decir, el código se amontonará en una carpeta, lo que hace que una función sea particularmente inflada. el mantenimiento es difícil o incluso imposible de mantener, por lo que generalmente cuando desarrollamos un proyecto, dividiremos el proyecto en muchos archivos y luego los introduciremos en el archivo de índice, que es para facilitar el mantenimiento posterior y encontrar cualquier archivo que tenga problemas. ¿Qué archivo está bien?
Pero en consecuencia, dado que debe dividirse en varios archivos, la página debe cargar muchos archivos, lo que equivale a introducir varios <script> en un archivo, lo que afectará el rendimiento en la ejecución.
Si podemos importar en la forma de importación, podemos asegurarnos de que la sabiduría html de la página es solo un archivo, y el préstamo de pterosaurio del archivo también es muy claro.
En segundo lugar, la herramienta de empaquetado del módulo del módulo.
Nota: En este punto, el paquete web no se considerará un traductor js en el sentido general, porque el paquete web solo conoce la sintaxis de importación, no conoce otra sintaxis js avanzada, por lo que el paquete web es solo una herramienta de empaquetado de módulos.
1. Cómo instalar el paquete web
Podemos pensar en la misma forma de instalar vue.De la misma manera, la instalación de estas herramientas cumple con la especificación del nodo, y el archivo de inicialización npm init se puede usar para cumplir con la especificación.
No recomendamos instalar webpack globalmente aquí, porque la versión es fija, porque los diferentes proyectos que desarrollamos usarán diferentes webpacks para empaquetar. Si se recomienda aquí, es decir, podemos instalar nuestro paquete web a través de --save-dev en cada proyecto.
npm install html-webpack-plugin --save-dev
或
npm install [email protected] -g
或
cnpm install [email protected] -g2. Use el archivo de configuración del paquete web
Nota: Nuestros diferentes archivos están empaquetados de manera diferente. El archivo js debe importarse. Si es una imagen, se puede importar directamente. Y se debe proporcionar el archivo de entrada, que es para especificar cómo se debe escribir el archivo de configuración. El nombre de nuestro archivo de configuración se nos ha proporcionado en vue----"webpack.config.js
No necesitamos agregar npm aquí porque el script configura nuestro proyecto en el proyecto, y primero encontraremos el paquete web del proyecto. Entonces, la función de webpack-cli es permitirnos a todos ejecutar las instrucciones de nuestro paquete web en la línea de comandos.
Echemos un vistazo a cuál es el resultado de este paquete webpack:
Podemos ver que cada archivo llamado chunk representa cada archivo js, y chunknames es el nombre especificado durante la configuración.