(1) Comience con un proyecto de paquete web vacío

Para comprender mejor el código fuente de VUE, Silly Fish decidió escribir una versión simple de VUE,

Todo comienza con el establecimiento del proyecto, construimos un proyecto de paquete web

 

 Luego instale el componente de paquete web npm install webpack --save-dev

 

Este es un proyecto vacío, por lo que modificaremos la estructura del proyecto de la siguiente manera

 

 index.js bajo src como un archivo de entrada, puede escribir algo de lógica JS primero

La carpeta de compilación coloca nuestra configuración de compilación, test.js coloca la instrucción de prueba del comando de nodo (esto puede ignorarse) y build.js coloca la configuración del paquete web

Como sigue:

const ruta = require ( ' ruta ' ) 
module.exports = { 
    modo: ' producción ' , 
    entrada: { 
        aplicación: ' ./src/index.js ' 
    }, 
    complementos: [], 
    salida: { 
        nombre de archivo: ' wf-sample -vue.js ' , 
        ruta: ruta.resolve (__ dirname, ' ../dist ' ) 
    }, 
    módulo: { 
        reglas: [] 
    }, 
    devServer: { 
        contentBase: ' ./dist' , 
        caliente: verdadero 
    } 
}

Finalmente agregamos una instrucción en package.json para construir nuestro index.js

 

 Como resultado, todo salió bien, generamos el resultado de la compilación

 

 ¿Deberíamos probar los resultados de nuestra construcción? Continuamos transformando el proyecto a continuación ..............................