El paquete web está basado en node.js. Webpack es una herramienta de empaquetado de módulos estáticos para aplicaciones JavaScript modernas. Está desarrollado en base a node.js. Cuando se usa, requiere compatibilidad con el componente node.js. Debe instalarse mediante npm o cnpm y la sintaxis es "cnpm install webpack". -gramo".
El entorno operativo de este tutorial: sistema Windows 7, nodejs versión 16, computadora DELL G3.
Webpack es una herramienta de compilación de código con entrada, salida, cargador y complementos. webpack es una herramienta de agrupación de módulos estáticos para aplicaciones JavaScript modernas. Realizará un análisis estático basado en las dependencias de los módulos y luego generará los recursos estáticos correspondientes para estos módulos de acuerdo con las reglas especificadas.
Cuando webpack procesa una aplicación, crea internamente un gráfico de dependencia que se asigna a cada módulo requerido por el proyecto y genera uno o más paquetes.
Webpack es una herramienta de empaquetado front-end desarrollada en base a node.js. Requiere compatibilidad con el componente node.js cuando se utiliza.
Instalar Webpack
① El funcionamiento de Webpack depende de Node.js, por lo que primero es necesario instalar Node.js.
Una vez completada la instalación, ingrese las siguientes dos líneas de comandos en la ventana de línea de comandos. Si aparece un número de versión, la instalación se realizó correctamente.
$ node -v$ npm -v
② Luego puede instalar Webpack a través de npm (una herramienta de administración de paquetes basada en Node.js).
Debido a que la fuente de npm está en el extranjero, la velocidad de instalación puede ser lenta. Se recomienda utilizar npm mirror cnpm de Taobao. Pero una cosa a tener en cuenta es que algunos paquetes en cnpm serán diferentes (en términos generales, no afecta el uso.
Puede completar la configuración de cnpm a través de la siguiente línea de código
$ npm install -g cnpm --registry=https). ://registry .npm.taobao.org
Utilice cnpm para instalar webpack:
cnpm install webpack -g
Cree un proyecto
A continuación, creamos una aplicación de directorio:
mkdir app
Agregue el archivo runoob1.js en el directorio de la aplicación, el código es el siguiente:
app/runoob1.js file
document.write ("Funciona." Agregue el archivo index.html en el directorio de la aplicación, el código es el siguiente:
app/index.html file
<html>
<cabeza>
<meta juego de caracteres="utf-8">
</cabeza>
<cuerpo>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</cuerpo>
</html> A continuación, usamos el comando webpack para empaquetar:
webpack runoob1.js bundle.js
La ejecución del comando anterior compilará el archivo runoob1.js y generará el archivo bundle.js. Después del éxito, la información de salida es la siguiente:
Hash. : a41c6217554e666594cb
Versión: paquete web 1.12.13
Tiempo: 50 ms
Fragmentos de tamaño de activo Nombres de fragmentos
paquete.js 1,42 kB 0 [emitido] principal
[0] ./runoob1.js 29 bytes {0} [construido] Abra index.html en el navegador, los resultados de salida son los siguientes:
