¿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