Red de conocimiento informático - Espacio del host - Enseñarle paso a paso: crear andamios de vue y configurar archivos webpack

Enseñarle paso a paso: crear andamios de vue y configurar archivos webpack

Nota: Una vez completada la configuración, habrá un archivo package.json en el proyecto

Una vez completada la instalación, habrá una línea de instrucciones del paquete web en package.json

Nota: Usar aquí y después

cnpm se debe a que instalé la imagen de Taobao localmente y es más rápido configurar e instalar la línea de comando con cnpm

Después de instalar package.json, hay una línea adicional de instrucciones webpack-dev-server

Nota: Para configurar este comando, puede ingresar npm run dev run project en la línea de comando. La dirección que se muestra en el navegador es la predeterminada: 8080; /; si no desea el valor predeterminado, puede modificar el puerto: en el archivo package.json Cambie el script en el archivo dev a dev: "webpack-dev-server --host 172.172.172.1 --port 8888 -- open --config webpack.config.js"

Configurar webpack.config. La configuración js es la siguiente: configuración de entrada y configuración de exportación

Lo que necesita especial atención es: hay dos líneas horizontales delante del nombre del directorio (establecí una línea horizontal, pero el resultado fue incorrecto. Parece que Puede ser un problema pequeño, pero el problema no es pequeño, porque no presté atención y no pude encontrar este error)

Establezca lo siguiente en index.html: (Debe colocar el archivo main. js en index.html)

En webpack Configure lo siguiente en config.js: (Necesita importar main.js en el archivo index.html)

En webpack. .config.js, configure lo siguiente: Importe main.js al archivo webpack.config .js. file)

Ingrese npm run dev para ejecutar el proyecto. A continuación se muestra la llamada de línea de comando exitosa:

Después de que la llamada sea exitosa, el navegador se abre automáticamente para mostrar el contenido de la página: el puerto predeterminado es 8080

Modifique el contenido del archivo index.html en el archivo main.js, luego ejecute el proyecto y verá los cambios en el contenido mostrado por el navegador. Situación:

Debido a que la función de actualización en caliente de webpack-dev-server está configurada, el navegador actualizará automáticamente el contenido modificado después de la modificación: (lo que indica que la configuración de la línea de comando anterior fue exitosa)

Puede presionar f12 para ver websocket en el modo de depuración del navegador

Nota: Genere main.js en el directorio dist en el directorio dist. Este es un proceso de empaquetado.

dist ha generado el archivo del paquete mainjs en el directorio

Configurar la línea de comando css-loader

Configurar la línea de comando style-loader

Después de configurar css- Línea de comando loader/style-loader, agregue la línea de comando css-loader/style-loader en el archivo de configuración webpack.config.js.

Agregue la línea de comando css-loader/style-loader al archivo de configuración config.js para configurar el cargador y agregar procesamiento de archivos .css

Cree un nuevo archivo style.css en el directorio del proyecto

p>

Luego use importar en el archivo de entrada main.js para introducir:

El navegador actualizará automáticamente el estilo de fuente del contenido (habilite la función de actualización en caliente)

En este momento, puede ver en el navegador que el CSS se crea y escribe dinámicamente mediante la etiqueta js lt;stylegt;

Después de configurar el complemento en package.json, se mostrará en el navegador: