Guía de instalación para webpack Xiaobai

Guía de instalación de Webpack

Debido a que la mayoría de Xiaobai siempre pisó varios pozos al contactar con webpack, entonces. Este artículo le mostrará cómo instalar webpack

Durante este proceso, puede encontrar algunos errores que no se tratan en este artículo. Puede consultar los tres aspectos para verificar si la instalación no se realizó correctamente.

1. Requisitos previos

Antes de comenzar, asegúrese de tener instalada la última versión de Node.js

Debido a la pared, puede dar lugar al npm installfenómeno de que todo el mundo está atascado en ese momento, por lo que le sugiero que lo configure primero.

Actualmente existen dos métodos, uno es instalar el espejo cnpm y el otro es usar un proxy. El primero puede encontrar algunos problemas nuevos, por lo que este artículo recomienda el segundo método. Abra la ventana de comando cmd e ingrese el siguiente comando

npm config set registry https://registry.npm.taobao.org

Los comandos posteriores, como install, aún funcionan a través de npm, no de cnpm.

2. Instalar paquete web

• Instalación local

  npm install --save-dev webpack
  # 或指定版本
  npm install --save-dev webpack@<version>
  

• Instalación global

  npm install --global webpack
  

Sugiero una instalación global aquí, principalmente para la conveniencia del aprendizaje de Xiaobai. Si la versión encuentra problemas en algunos proyectos en el futuro, desinstálela para la instalación local.

3. Instale webpack-cli

Cuando complete el paso anterior, es webpack -vposible que aparezcan las siguientes indicaciones de problemas al ver la versión a través del comando :

El mensaje indica que debe estar instalado webpack-cli, no se preocupe, ingrese y y presione Enter para instalar automáticamente

Algunos amigos aún pueden encontrar nuevos problemas en este paso, de la siguiente manera:

Debido a que estamos instalando en la ventana de comandos de cmd, se nos pedirá una pista que no se puede encontrar. No se preocupe por esto. Es similar a la instalación del paquete web, simplemente instálelo globalmente.

npm install webpack-cli -g

Una vez completada la instalación, vuelva a comprobar la versión:

4. Configure el modo de empaquetado

Después de completar los pasos anteriores, puede empaquetar, pero el main y js empaquetados se muestran en una sola línea, lo cual no es conveniente de leer, y habrá advertencias:

No es difícil saber si miras su mensaje con atención, porque el modo no está configurado.

No se preocupe, tenemos un archivo nuevo, el nombre del archivo es webpack.config.js, la configuración es la siguiente, probablemente significa decirle a webpack, queremos el entorno de producción

module.exports = {
	mode: 'development'
}

Aquí es casi lo mismo. Espero que todos puedan instalar webpack sin problemas. Si hay algún problema con este método, por favor, indíquelo.