Red de conocimiento informático - Problemas con los teléfonos móviles - ¿Qué debo hacer si falla la instalación global de webpack, el paquete web básico para el front-end web?

¿Qué debo hacer si falla la instalación global de webpack, el paquete web básico para el front-end web?

WebPack se instala utilizando la forma de instalación npm de línea de comando.

d://Cortar a la unidad d

mkdir webpack_demo//Crear una nueva carpeta webpack_demo en la unidad d

cd webpack_demo//Ingresar a la carpeta

npm install -g webpack //Instalar webpack globalmente

(Tenga en cuenta que si instala de esta manera, se le solicitará que instale webpack-cli; este es un mensaje 4.x Si no desea instalar webpack, cli debe reinstalar una versión inferior de webpack)

npm uninstall -g webpack //Desinstale primero el paquete web previamente instalado

npm install -. g webpack@3.6.0 // Instalar una versión inferior de webpack

Una vez completada la instalación global, también necesitamos instalar un directorio de proyecto. Antes de instalar con npm, primero debemos inicializarlo.

El objetivo principal de la inicialización es generar el archivo package.json (este es un archivo de descripción de npm estándar, que contiene información rica).

Incluye módulos dependientes del proyecto actual, tareas de script personalizadas, etc. Si aún no comprende este archivo, puede consultar el conocimiento relacionado de node).

npm init//Inicializa el proyecto, puedes presionar Enter hasta el final para generar el archivo package.json

npm install --save-dev webpack@3.6.0 // Oficialmente no es compatible con la instalación global. La instalación bloqueará la versión, así que instálela en el directorio del proyecto

Una vez completada la instalación, puede verificar el número de versión webpack -v

Después de la instalación se completa, cree una nueva configuración básica del archivo de configuración webpack.config.js

p>

const path = require('path');

const uglify = require('uglifyjs-webpack -plugin');//Compresión de código

module.exports ={

//Elementos de configuración del archivo de entrada

entrada:{

entry:'./src/entry.js',

//Aquí introducimos otro archivo de entrada

entry2:'./src/entry2.js'

},

//Exportar archivo Elementos de configuración

salida:{

//La ruta de salida utiliza la sintaxis de Nodo

ruta:path.resolve(__dirname,'dist'),

//Nombre del archivo de salida

nombre de archivo:'[nombre].js'

},

//Módulo: p. ej., interpretar CSS, cómo convertir y comprimir imágenes

módulo:{

reglas: [

{

prueba: /\.css$ //,

uso: [ 'style-loader', 'css-loader' ]// Manejo del cargador de estilos

}

]

},

//Complementos, utilizados para producir plantillas y diversas funciones

complementos:[

nuevo uglify()//Compresión de código

],

//Configurar la función del servicio de desarrollo del paquete web

devServer:{

//Establezca la estructura básica del directorio

contentBase:path.resolve(__dirname,'dist'),

//La dirección IP del servidor, puede usar IP o localhost

host:'localhost',

//Si la compresión del lado del servidor está habilitada

compress: true,

// Configure el número de puerto de servicio, que se puede personalizar

puerto: 1717

}

}

(Nota: al instalar webpack- dev-server, después de la instalación, el informe de operación no es un comando interno y debe estar en la configuración de package.json)

"scripts": {

"dev": "webpack -dev-server --inline --progress --config build/webpack.dev.conf.js ",

"start": "npm run dev",

"build ": "node build/build.js"12345

},

Si aún informa que no es un comando interno, reinstale la versión inferior de npm i webpack-dev- servidor@2.9.1

npm install --save-dev webpack