Utilice HtmlWebpackPlugin para configurar webpack cdn
En el artículo anterior, presentamos el principio de implementación de cdn. Ahora echemos un vistazo a cómo usar la función cdn en el desarrollo formal. Para utilizar la función CDN, necesitamos un proveedor de servicios CDN. Podemos crearlo nosotros mismos o utilizar algunos proveedores de servicios conocidos. Afortunadamente, existen muchos proveedores de servicios CDN gratuitos en el mercado, como:
. BootCDN es un servicio CDN gratuito que admite y mantiene proyectos front-end de código abierto en el sitio web chino Bootstrap. Los recursos del proyecto están sincronizados con la biblioteca de recursos cdnjs. Su interfaz es relativamente atractiva y admite funciones de búsqueda. Puede probar si el cdn en línea es normal, por lo que a continuación se utiliza Bootcdn como ejemplo.
En la etapa inicial del desarrollo del proyecto, a menudo usamos webpack para construir proyectos. Tiene dos funciones principales, a saber,
Usar cdn en webpack es generar recursos estáticos en el paquete. procesamiento, el principio fundamental es utilizar html-webpack-plugin para insertar dinámicamente enlaces cdn.
No presentaré demasiado sobre el uso de webpack aquí. Presentaré el proyecto predeterminado generado por vue--cli 2.x como ejemplo.
html-webpack. -plugin es un complemento de paquete web que puede crear y editar contenido html dinámicamente. Puede usar la sintaxis esj en html para leer los parámetros en la configuración, lo que simplifica el proceso de creación y edición de html con html-webpack-plugin. La lectura de parámetros en la configuración simplifica la construcción de archivos html.
Esta vez lo usamos principalmente para insertar dinámicamente enlaces cdn, como etiquetas de enlace y etiquetas de script.
Dirección del proyecto en línea
vue-cli 2.x
Cree un proyecto vue llamado webpack-cdn-demo, escriba webpack, si vue está instalado -cli es la versión 3.x, los comandos son diferentes, consulte vue-cli 3 para obtener más detalles.
Instalar dependencias
Iniciar el proyecto
Aquí hay una breve descripción general de la estructura del directorio
webpack.prod.conf en la compilación El archivo js es el archivo principal en el que queremos centrarnos, donde configuraremos dinámicamente los módulos que no queremos empaquetar y crearemos los enlaces correspondientes.
En el proyecto Webpack, los recursos de terceros importados se empaquetarán en un archivo de venta. Podemos excluir el módulo del paquete a través de la configuración del atributo externo del paquete web. Para obtener más detalles, consulte Externos.
En los pasos anteriores, creamos un proyecto que contiene bibliotecas vue, vue-router y ui (como element-ui). Para fines de demostración, instalaremos los módulos element-ui y axios y los incluiremos como cdn durante el proceso de compilación.
Tenga en cuenta que al instalar Remember-S, su función es insertar registros en el archivo del proyecto package.json después de la instalación, y las operaciones posteriores deben leer los módulos instalados.
Para CDN , podemos construirlo nosotros mismos o utilizar un proveedor de servicios CDN profesional. Aquí utilizamos CDN bootcdn gratuito. Hay muchos beneficios al usar una CDN gratuita, pero también existen peligros ocultos, es decir, el servicio puede fallar.
Para buscar el módulo anterior, los resultados son los siguientes
Según las reglas, la regla de ruta del recurso cdn es
Lo mismo es cierto para otros proveedores de servicios cdn
Usar cdn en realidad significa que los scripts y los enlaces de estilo se insertarán dinámicamente en el paquete web al iniciar y empaquetar el proyecto. Para facilitar el mantenimiento, podemos usar cdn agregando un enlace. el archivo build/utils.js, que aparecerá en el futuro en webpack.dev.conf.js y webpack.prod.conf.js.
Si no hay build/utils.js, también puede agregarlo a otros archivos, siempre que pueda operarse en pasos posteriores
nombre del módulo, igual que package.json
denominación del alcance del módulo de alcance
dirección js js
dirección css css
Aquí hay un lugar especial donde puede agregue algunos métodos. /p>
Preste especial atención al alcance aquí, que es la información de los parámetros externos en la configuración del paquete web. Por ejemplo, el alcance de vue se denomina Vue, el alcance de vue-router se denomina VueRouter y el alcance de element-ui se denomina ELEMENT, de manera similar, el alcance de jq se denomina JQuery.
Podríamos usar JQuery y traer los recursos primero y luego ingresar las aproximaciones una por una en la consola (todavía no he encontrado una manera mejor).
Cuando el paquete web se inicia en caliente, podemos usar cdn para la depuración local.
En build/webpack.dev.conf.js, utils.js se ha importado de forma predeterminada, por lo que puede llamar directamente a métodos relacionados. Si es un archivo personalizado, recuerde importarlo.
Podemos agregarle algunos atributos personalizados para que sea más fácil llamar a index.html.
Las propiedades personalizadas cdnConfig y onlyCss se pueden leer en html a través de htmlWebpackPlugin.options.
Para obtener más configuración del complemento html-webpack, visite el sitio web oficial. No se necesita más aquí por ahora.
Al empaquetar, usamos cdn y la configuración es similar a la del desarrollo anterior, pero se requiere un paso más.
Tenga en cuenta los módulos externos aquí, se usarán más adelante, es decir, hay más pasos que dev.
Agregue las mismas dos configuraciones que dev, pero necesitamos cambiar onlyCss a true porque queremos usar algo más que CSS al empaquetar.
Se ha completado la configuración del paquete web y se han agregado los parámetros al html-webpack-plugin para que podamos usarlo directamente en la página, la sintaxis es ejs, similar a asp.net, jsp, php.
Inserte etiquetas de enlace y etiquetas de secuencia de comandos utilizando js traversal <% %> y htmlWebpackPlugin.options.
PD: Los cambios en la configuración del paquete web requieren reiniciar el proyecto para que surtan efecto
Empacar el proyecto
Como puede ver, el tamaño del paquete de software ha se ha reducido considerablemente
El recurso cdn se ha introducido correctamente en la página.
Finalmente, esta es la dirección de git: /zhkumsg/webpack-cdn-demo
Una línea divisoria que es más triste que triste
Resulta que Fue hace dos años que alguien creó el tipo webpack-cdn-plugin.