Enseñarle paso a paso: crear andamios de vue y configurar archivos webpack
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: