Webpack: una introducción detallada

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost

  • Índice
    1. ¿Por qué Webpack?
    2. Configurar el paquete web
    3. Usando la línea de comando del paquete web
    4. Usando un archivo de configuración
    5. Usando cargadores
    6. Uso del cargador de manillares
    7. Usando complementos

    El paquete de módulos JavaScript existe desde hace algún tiempo. RequireJS tuvo sus primeras confirmaciones en 2009, luego Browserify hizo su debut y desde entonces han aparecido varios otros paquetes en Internet. Entre ese grupo, webpack se destacó como uno de los mejores. Si no está familiarizado con ella, en este artículo, Joseph Zimmerman le ayudará a empezar a utilizar esta poderosa herramienta.

     

    En la mayoría de los lenguajes de programación (incluido ECMAScript 2015+, que es una de las versiones más recientes del estándar para JavaScript, pero aún no es totalmente compatible con todos los navegadores), puede separar su código en varios archivos e importar esos archivos a su aplicación para utilizar la funcionalidad contenida en ellos. Esto no estaba integrado en los navegadores, por lo que se crearon paquetes de módulos para brindar esta capacidad en un par de formas: cargando módulos de forma asincrónica y ejecutándolos cuando terminaron de cargarse, o combinando todos los archivos necesarios en un solo archivo JavaScript que cargarse a través de una scriptetiqueta en el HTML.

    Sin los cargadores y paquetes de módulos, siempre puedes combinar tus archivos manualmente o cargar tu HTML con innumerables scriptetiquetas, pero eso tiene varias desventajas:

    • Debe realizar un seguimiento del orden correcto en el que deben cargarse los archivos, incluidos qué archivos dependen de qué otros archivos y asegurarse de no incluir ningún archivo que no necesite.
    • Varias scriptetiquetas significan múltiples llamadas al servidor para cargar todo el código, lo que perjudica el rendimiento.
    • Evidentemente, esto implica mucho trabajo manual, en lugar de dejar que el ordenador lo haga por ti.

    La mayoría de los paquetes de módulos también se integran directamente con npm o Bower para permitirle agregar fácilmente dependencias de terceros a su aplicación. Simplemente instálelos y agregue una línea de código para importarlos a su aplicación. Luego, ejecute su paquete de módulos y tendrá su código de terceros combinado con el código de su aplicación o, si lo configura correctamente, podrá tener todo su código de terceros en un archivo separado, de modo que cuando actualice el código de la aplicación, los usuarios no necesitan descargar el código del proveedor cuando necesitan actualizar el caché del código de su aplicación.

     

    ¿Por qué Webpack?

    Ahora que tiene conocimientos básicos sobre el propósito de webpack, ¿por qué debería elegir webpack en lugar de la competencia? Hay unas pocas razones:

    • Su relativa novedad le da una ventaja porque es capaz de solucionar o evitar las deficiencias y problemas que han surgido en sus predecesores.
    • Empezar es sencillo. Si solo busca agrupar un montón de archivos JavaScript sin ningún otro elemento sofisticado, ni siquiera necesitará un archivo de configuración.
    • Su sistema de complementos le permite hacer mucho más, lo que lo hace bastante poderoso. Por lo tanto, podría ser la única herramienta de compilación que necesita.

    Solo he visto algunos otros paquetes de módulos y herramientas de compilación que pueden decir lo mismo, pero webpack parece tener una cosa sobre ellos: una gran comunidad que puede ayudarte cuando te quedas atascado. La comunidad de Browserify es probablemente igual de grande, si no más grande, pero carece de algunas de las características potencialmente esenciales que vienen con el paquete web. Con todos los elogios que le he dado al paquete web, estoy seguro de que estás esperando que siga adelante y muestre algo de código, ¿verdad? Entonces, hagamos eso.

    Configurar el paquete web

    Antes de poder usar webpack, debemos instalarlo. Para hacer eso, necesitaremos Node.js y npm, los cuales asumiré que los tienes. Si no los tiene instalados, el sitio web de Node.js es un excelente lugar para comenzar.

    Ahora, hay dos formas de instalar webpack (o cualquier otro paquete CLI, de hecho): global o localmente. Si lo instala globalmente, puede usarlo sin importar en qué directorio se encuentre, pero no se incluirá como una dependencia para su proyecto y no podrá cambiar entre versiones de webpack para diferentes proyectos (algunos proyectos Es posible que necesiten más trabajo para actualizar a una versión posterior, por lo que es posible que tengan que esperar). Por lo tanto, prefiero instalar paquetes CLI localmente y usar rutas relativas o scripts npm para ejecutar el paquete. Si no está acostumbrado a instalar paquetes CLI localmente, puede leer sobre esto en una publicación que escribí sobre cómo deshacerse de los paquetes npm globales .

    De todos modos, usaremos scripts npm para nuestros ejemplos, así que sigamos adelante con su instalación local. Lo primero es lo primero: cree un directorio para el proyecto donde podamos experimentar y aprender sobre webpack. Tengo un repositorio en GitHub que puedes clonar y entre cuyas ramas puedes cambiar para seguirlo, o puedes comenzar un nuevo proyecto desde cero y tal vez usar mi repositorio de GitHub para comparar.

     

    Una vez que esté dentro del directorio del proyecto a través de la consola de su elección, querrá inicializar el proyecto con npm init. Sin embargo, la información que proporciona realmente no es tan importante, a menos que planee publicar este proyecto en npm.

    Ahora que tiene un package.jsonarchivo configurado ( npm initlo creó), puede guardar sus dependencias allí. Entonces, usemos npm para instalar webpack como una dependencia con npm install webpack -D. ( -Dlo guarda package.jsoncomo una dependencia de desarrollo; también puede usarlo –save-dev).

    Antes de que podamos usar webpack, debemos tener una aplicación simple para usarlo. Cuando digo simple, lo digo en serio. Primero, instalemos Lodash solo para que tengamos una dependencia para cargar en nuestra aplicación simple: npm install lodash -S( -Ses lo mismo que –save). Luego, crearemos un directorio llamado srcy allí crearemos un archivo llamado main.jscon el siguiente contenido:

    var map = require('lodash/map');function square(n) { return n*n;}console.log(map([1,2,3,4,5,6], square));

    Bastante simple, ¿verdad? Simplemente estamos creando una pequeña matriz con los números enteros del 1 al 6, luego usamos Lodash mappara crear una nueva matriz elevando al cuadrado los números de la matriz original. Finalmente, enviamos la nueva matriz a la consola. Este archivo puede incluso ejecutarse mediante Node.js, lo cual puede ver ejecutando node src/main.js, que debería mostrar este resultado: [ 1, 4, 9, 16, 25, 36 ].

    Pero queremos combinar este pequeño script con el código Lodash que necesitamos y prepararlo para los navegadores, ¿y ahí es donde entra en juego el paquete web? ¿Como hacemos eso?

    Usando la línea de comando del paquete web

    La forma más sencilla de empezar a utilizar webpack sin perder tiempo en un archivo de configuración es simplemente ejecutarlo desde la línea de comandos. La versión más simple del comando para webpack sin usar un archivo de configuración toma una ruta de archivo de entrada y una ruta de archivo de salida. Webpack leerá ese archivo de entrada, rastreará su árbol de dependencias, combinará todos los archivos en un solo archivo y generará el archivo en la ubicación que haya especificado como ruta de salida. Para este ejemplo, nuestra ruta de entrada es src/main.jsy queremos generar el archivo empaquetado en dist/bundle.js. Entonces, creemos un script npm para hacer eso (no tenemos el paquete web instalado globalmente, por lo que no podemos ejecutarlo directamente desde la línea de comando). En package.json, edite la “scripts”sección para que tenga el siguiente aspecto:

    … "scripts": { "build": "webpack src/main.js dist/bundle.js", }…

    Ahora, si ejecuta npm run build, webpack debería ponerse a funcionar. Cuando termine, lo que no debería llevar mucho tiempo, debería haber un dist/bundle.jsarchivo nuevo. Ahora puede ejecutar ese archivo con Node.js ( node dist/bundle.js) o ejecutarlo en el navegador con una página HTML simple y ver el mismo resultado en la consola.

     

    Antes de explorar un poco más el paquete web, hagamos que nuestros scripts de compilación sean un poco más profesionales eliminando el distdirectorio y su contenido antes de reconstruirlos, y también agregando algunos scripts para ejecutar nuestro paquete. Lo primero que debemos hacer es instalar del-clipara poder eliminar directorios sin molestar a las personas que no usan el mismo sistema operativo que nosotros (no me odien porque uso Windows); npm install del-cli -Ddebería funcionar. Luego, actualizaremos nuestros scripts npm a lo siguiente:

    … "scripts": { "prebuild": "del-cli dist -f", "build": "webpack src/main.js dist/bundle.js", "execute": "node dist/bundle.js", "start": "npm run build -s npm run execute -s" }…

    Mantuvimos “build”lo mismo que antes, pero ahora tenemos “prebuild”que hacer una limpieza, que se ejecutará antes de “build”cada vez que “build”se indique que se ejecute. También tenemos “execute”, que usa Node.js para ejecutar el script incluido, y podemos usarlo “start”para hacerlo todo con un solo comando (el -sbit simplemente hace que los scripts npm no envíen tantas cosas inútiles a la consola). Adelante, corre npm start. Debería ver la salida del paquete web, seguida rápidamente por nuestra matriz cuadrada, en su consola. ¡Felicidades! Acabas de terminar todo en la example1rama del repositorio que mencioné anteriormente.

    Usando un archivo de configuración

    Por muy divertido que sea usar la línea de comando del paquete web para comenzar, una vez que comience a usar más funciones del paquete web, querrá dejar de pasar todas sus opciones a través de la línea de comando y en su lugar usar un archivo de configuración. , que tendrá más capacidad pero también será más legible porque está escrito en JavaScript.

    Entonces, creemos ese archivo de configuración. Cree un nuevo archivo nombrado webpack.config.jsen el directorio raíz de su proyecto. Este es el nombre de archivo que webpack buscará de forma predeterminada, pero puede pasar la –config [filename]opción a webpack si desea darle otro nombre a su archivo de configuración o colocarlo en un directorio diferente.

    Para este tutorial, solo usaremos el nombre de archivo estándar y, por ahora, intentaremos que funcione de la misma manera que lo hicimos solo con la línea de comando. Para hacer eso, necesitamos agregar el siguiente código al archivo de configuración:

    module.exports = { entry: './src/main.js', output: { path: './dist', filename: 'bundle.js' }};

    Estamos especificando el archivo de entrada y el archivo de salida, tal como lo hicimos antes con la línea de comando. Este es un archivo JavaScript, no un archivo JSON, por lo que necesitamos exportar el objeto de configuración; de ahí el archivo module.exports. Todavía no se ve mejor que especificar estas opciones a través de la línea de comando, pero al final del artículo, estará feliz de tenerlo todo aquí.

    Ahora podemos eliminar esas opciones que estábamos pasando al paquete web de los scripts de nuestro package.jsonarchivo. Tus scripts deberían verse así ahora:

     

    … "scripts": { "prebuild": "del-cli dist -f", "build": "webpack", "execute": "node dist/bundle.js", "start": "npm run build -s npm run execute -s" }…

    Puedes hacerlo npm startcomo lo hiciste antes, ¡y debería resultarte muy familiar! Eso es todo lo que necesitábamos para la example2sucursal.

    Usando cargadores

    Tenemos dos formas principales de agregar capacidades al paquete web: cargadores y complementos. Hablaremos de los complementos más adelante. Ahora nos centraremos en los cargadores, que se utilizan para aplicar transformaciones o realizar operaciones en archivos de un tipo determinado. Puede encadenar varios cargadores para manejar un solo tipo de archivo. Por ejemplo, puede especificar que .jstodos los archivos con la extensión se ejecutarán a través de ESLint y luego Babel los compilará desde ES2015 hasta ES5 . Si ESLint encuentra una advertencia, se enviará a la consola y, si encuentra algún error, impedirá que el paquete web continúe.

    Para nuestra pequeña aplicación, no configuraremos ningún linting, pero configuraremos Babel para compilar nuestro código en ES5. Por supuesto, primero deberíamos tener algo de código ES2015, ¿verdad? Convirtamos el código de nuestro main.jsarchivo a lo siguiente:

    import { map } from 'lodash';console.log(map([1,2,3,4,5,6], n = n*n));

    Este código hace esencialmente exactamente lo mismo, pero (1) estamos usando una función de flecha en lugar de la squarefunción nombrada, y (2) estamos cargando mapdesde ‘lodash’ES2015 import. En realidad, esto cargará un archivo Lodash más grande en nuestro paquete porque estamos solicitando todo Lodash, en lugar de simplemente solicitar el código asociado al mapsolicitar ‘lodash/map’. Puedes cambiar esa primera línea import map from ‘lodash/map’si lo prefieres, pero yo la cambié a esta por varias razones:

    • En una aplicación grande, es probable que utilices una parte bastante grande de la biblioteca Lodash, por lo que también puedes cargarla toda.
    • Si está utilizando Backbone.js, cargar todas las funciones que necesita individualmente será muy difícil simplemente porque no hay documentación que especifique cuántas se necesitan.
    • En la próxima versión principal de webpack, los desarrolladores planean incluir algo llamado agitación de árboles, que elimina partes de módulos no utilizadas. Entonces esto funcionaría igual en cualquier caso.
    • Me gustaría usarlo como ejemplo para enseñarles los puntos que acabo de mencionar.

    (Nota: Estas dos formas de cargar funcionan con Lodash porque los desarrolladores lo han creado explícitamente para que funcione de esa manera. No todas las bibliotecas están configuradas para funcionar de esta manera). Literatura y libros

    De todos modos, ahora que tenemos algo de ES2015, necesitamos compilarlo a ES5 para que podamos usarlo en navegadores decrépitos (¡la compatibilidad con ES2015 en realidad se ve bastante bien en los navegadores más recientes!). Para esto, necesitaremos Babel y todas las piezas que necesita para ejecutarse con webpack. Como mínimo, necesitaremos babel-core (la funcionalidad principal de Babel, que hace la mayor parte del trabajo), babel-loader (el cargador de paquetes web que interactúa con babel-core) y babel-preset-es2015 (que contiene las reglas que dígale a Babel que compile de ES2015 a ES5). También obtendremos babel-plugin-transform-runtime y babel-polyfill , los cuales cambian la forma en que Babel agrega polyfills y funciones auxiliares a su código base, aunque cada uno lo hace de manera un poco diferente, por lo que se adaptan a diferentes tipos. de proyectos. Usar ambos no tendría mucho sentido y es posible que no quieras usar ninguno de ellos, pero los agrego aquí para que, sin importar cuál elijas, veas cómo hacerlo. Si desea saber más sobre ellos, puede leer las páginas de documentación de Polyfill y Runtime Transform .

     

    De todos modos, instalemos todo eso: npm i -D babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime babel-polyfill. Y ahora configuremos webpack para usarlo. Primero, necesitaremos una sección para agregar cargadores. Entonces, actualiza webpack.config.jsa esto:

    module.exports = { entry: './src/main.js', output: { path: './dist', filename: 'bundle.js' }, module: { rules: [ … ] }};

    Hemos agregado una propiedad llamada module, y dentro de ella está la rulespropiedad, que es una matriz que contiene la configuración de cada cargador que utiliza. Aquí es donde agregaremos babel-loader. Para cada cargador, debemos establecer un mínimo de estas dos opciones: testy loader. testsuele ser una expresión regular que se prueba con la ruta absoluta de cada archivo. Estas expresiones regulares normalmente solo prueban la extensión del archivo; por ejemplo, /.js$/prueba si el nombre del archivo termina en .js. Para el nuestro, configuraremos esto en /.jsx?$/, que coincidirá con .jsy .jsx, en caso de que quieras usar React en tu aplicación. Ahora necesitaremos especificar loader, que especifica qué cargadores usar en archivos que pasan la extensión test.

    Esto se puede especificar pasando una cadena con los nombres de los cargadores, separados por un signo de exclamación, como por ejemplo ‘babel-loader!eslint-loader’. webpack los lee de derecha a izquierda, por lo que eslint-loaderse ejecutará antes babel-loader. Si un cargador tiene opciones específicas que desea especificar, puede utilizar la sintaxis de cadena de consulta. Por ejemplo, para configurar la fakeoptionopción truepara Babel, cambiaríamos el ejemplo anterior a ‘babel-loader?fakeoption=true!eslint-loader. También puede usar la useopción en lugar de la loaderopción que le permite pasar una serie de cargadores si cree que sería más fácil de leer y mantener. Por ejemplo, los últimos ejemplos se cambiarían a use: [‘babel-loader?fakeoption=true’, ‘eslint-loader’], que siempre se puede cambiar a varias líneas si cree que sería más legible.

    Debido a que Babel es el único cargador que usaremos, así es como se ve nuestra configuración del cargador hasta ahora:

     

    …rules: [ { test: /.jsx?$/, loader: 'babel-loader' }]…

    Si está usando solo un cargador, como lo hacemos nosotros, entonces existe una forma alternativa de especificar opciones para el cargador, en lugar de usar las cadenas de consulta: usando el optionsobjeto, que será simplemente un mapa de pares clave-valor. Entonces, por fakeoptionejemplo, nuestra configuración se vería así:

    …rules: [ { test: /.jsx?$/, loader: 'babel-loader', options: { fakeoption: true } }]…

    Usaremos esta sintaxis para configurar algunas opciones para Babel:

    …rules: [ { test: /.jsx?$/, loader: 'babel-loader', options: { plugins: ['transform-runtime'], presets: ['es2015'] } }]…

    Necesitamos configurar los ajustes preestablecidos para que todas las funciones de ES2015 se transformen en ES5, y también lo estamos configurando para usar el complemento transform-runtime que instalamos. Como se mencionó, este complemento no es necesario, pero está ahí para mostrarle cómo hacerlo. Una alternativa sería usar el .babelrcarchivo para configurar estas opciones, pero entonces no podría mostrarte cómo hacerlo en el paquete web. En general, recomendaría usar .babelrc, pero mantendremos la configuración aquí para este proyecto.

    Sólo hay una cosa más que debemos agregar a este cargador. Necesitamos decirle a Babel que no procese archivos en la node_modulescarpeta, lo que debería acelerar el proceso de agrupación. Podemos hacer esto agregando la excludepropiedad al cargador para especificar que no se haga nada con los archivos en esa carpeta. El valor de excludedebe ser una expresión regular, por lo que lo estableceremos en /node_modules/.

    …rules: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { plugins: ['transform-runtime'], presets: ['es2015'] } }]…

    Alternativamente, podríamos haber usado la includepropiedad y especificar que solo deberíamos usar el srcdirectorio, pero creo que lo dejaremos como está. Con eso, debería poder ejecutar npm startnuevamente y, como resultado, obtener el código ES5 funcional para el navegador. Si decide que prefiere usar el polyfill en lugar del complemento transform-runtime, entonces tendrá que realizar uno o dos cambios. Primero, puedes eliminar la línea que contiene plugins: [‘transform-runtime],(también puedes desinstalar el complemento a través de npm si no lo vas a utilizar). Luego, debe editar la entrysección de configuración del paquete web para que se vea así:

    entry: [ 'babel-polyfill', './src/main.js'],

    En lugar de usar una cadena para especificar un único punto de entrada, usamos una matriz para especificar múltiples archivos de entrada, siendo el nuevo el polyfill. Primero especificamos el polyfill para que aparezca primero en el archivo incluido, lo cual es necesario para garantizar que los polyfills existan antes de intentar usarlos en nuestro código.

    En lugar de usar la configuración del paquete web, podríamos haber agregado una línea en la parte superior de src/main.js, import ‘babel-polyfill;lo que lograría exactamente lo mismo en este caso. En su lugar, utilizamos la configuración de entrada del paquete web porque necesitaremos que esté allí para nuestro último ejemplo y porque es un buen ejemplo para mostrar cómo combinar varias entradas en un solo paquete. De todos modos, eso es todo para la example3rama del repositorio. Una vez más, puedes ejecutar npm startpara verificar que esté funcionando.

     

    Uso del cargador de manillares

    Agreguemos otro cargador allí: manillares. El cargador de manillares compilará una plantilla de manillares en una función, que es lo que se importará a JavaScript cuando importe un archivo de manillares. Este es el tipo de cosas que me encantan de los cargadores: puedes importar archivos que no sean JavaScript y, cuando esté todo incluido, lo que se importe será algo utilizable por JavaScript. Otro ejemplo sería usar un cargador que le permita importar un archivo de imagen y que transforme la imagen en una cadena URL codificada en base64 que pueda usarse en JavaScript para agregar una imagen en línea a la página. Si encadena varios cargadores, uno de los cargadores podría incluso optimizar la imagen para que tenga un tamaño de archivo más pequeño.

    Como es habitual, lo primero que debemos hacer es instalar el cargador con npm install -D handlebars-loader. Sin embargo, si intentas utilizarlo, descubrirás que también necesita el propio manillar: npm install -D handlebars. Esto es para que tengas control sobre qué versión de Manillar usar sin necesidad de sincronizar tu versión con la versión del cargador. Pueden evolucionar de forma independiente.

    Ahora que tenemos ambos instalados, tenemos una plantilla de manillar para usar. Cree un archivo nombrado numberlist.hbsen el srcdirectorio con el siguiente contenido:

    ul {{#each numbers as |number i|}} li{{number}}/li {{/each}}/ul

    Esta plantilla espera una matriz (de números a juzgar por los nombres de las variables, pero debería funcionar incluso si no son números) y crea una lista desordenada con los contenidos.

    Ahora, ajustemos nuestro archivo JavaScript para usar esa plantilla para generar una lista creada a partir de la plantilla, en lugar de simplemente cerrar sesión en la matriz. Su main.jsarchivo ahora debería verse así:

    import { map } from 'lodash';import template from './numberlist.hbs';let numbers = map([1,2,3,4,5,6], n = n*n);console.log(template({numbers}));

    Lamentablemente, esto no funcionará en este momento porque el paquete web no sabe cómo importar numberlist.hbs, porque no es JavaScript. Si queremos, podríamos agregar un poco a la importdeclaración que informa al paquete web que use el cargador de manillares:

    import { map } from 'lodash';import template from 'handlebars-loader!./numberlist.hbs';let numbers = map([1,2,3,4,5,6], n = n*n);console.log(template({numbers}));

    Al anteponer la ruta con el nombre de un cargador y separar el nombre del cargador de la ruta del archivo con un signo de exclamación, le decimos a webpack que use ese cargador para ese archivo. Con esto, no tenemos que agregar nada al archivo de configuración. Sin embargo, en un proyecto grande, es probable que cargue varias plantillas, por lo que tendría más sentido indicarle al paquete web en el archivo de configuración que debemos usar manillares para que no tengamos que agregar a la handlebars!ruta para cada una de ellas. importación de una plantilla. Actualicemos la configuración:

     

    …rules: [ {/* babel loader config… */}, { test: /.hbs$/, loader: 'handlebars-loader' }]…

    Este fue simple. Todo lo que teníamos que hacer era especificar que queríamos que handlebars-loader manejara todos los archivos con la .hbsextensión. ¡Eso es todo! Hemos terminado con Manillar y la example4rama del repositorio. Ahora, cuando ejecute npm start, verá el resultado del paquete web, además de esto:

    ul li1/li li4/li li9/li li16/li li25/li li36/li/ul

    Usando complementos

    Los complementos son la forma, además de los cargadores, de instalar funciones personalizadas en el paquete web. Tiene mucha más libertad para agregarlos al flujo de trabajo del paquete web porque no se limitan a usarse únicamente mientras se cargan tipos de archivos específicos; se pueden inyectar prácticamente en cualquier lugar y, por tanto, pueden hacer mucho más. Es difícil dar una idea de cuánto pueden hacer los complementos, así que simplemente lo enviaré a la lista de paquetes npm que tienen "webpack-plugin" en el nombre, que debería ser una representación bastante buena.

    Solo tocaremos dos complementos para este tutorial (uno de los cuales veremos más adelante). Ya hemos hablado bastante de esta publicación, así que ¿por qué ser excesivo con más ejemplos de complementos, verdad? El primer complemento que usaremos es HTML Webpack Plugin , que simplemente genera un archivo HTML para nosotros: ¡finalmente podemos comenzar a usar la web!

    Antes de usar el complemento, actualicemos nuestros scripts para que podamos ejecutar un servidor web simple para probar nuestra aplicación. Primero, necesitamos instalar un servidor: npm i -D http-server. Luego, cambiaremos nuestro executescript al serverscript y lo actualizaremos starten consecuencia:

    …"scripts": { "prebuild": "del-cli dist -f", "build": "webpack", "server": "http-server ./dist", "start": "npm run build -s npm run server -s"},…

    Una vez finalizada la compilación del paquete web, npm starttambién se iniciará un servidor web y podrá navegar localhost:8080para ver su página. Por supuesto, todavía necesitamos crear esa página con el complemento, así que pasemos a eso. Primero, necesitamos instalar el complemento: npm i -D html-webpack-plugin.

    Cuando haya terminado, debemos ingresar webpack.config.jsy hacer que se vea así:

    var HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = { entry: [ 'babel-polyfill', './src/main.js' ], output: { path: './dist', filename: 'bundle.js' }, module: { rules: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { plugins: ['transform-runtime'], presets: ['es2015'] } }, { test: /.hbs$/, loader: 'handlebars-loader' } ] }, plugins: [ new HtmlwebpackPlugin() ]};

    Los dos cambios que hicimos fueron importar el complemento recién instalado en la parte superior del archivo y luego agregar una pluginssección al final del objeto de configuración, donde pasamos una nueva instancia de nuestro complemento.

    En este punto, no estamos pasando ninguna opción al complemento, por lo que está usando su plantilla estándar, que no incluye mucho, pero sí incluye nuestro script incluido. Si ejecuta npm starty luego visita la URL en el navegador, verá una página en blanco, pero debería ver que el HTML se envía a la consola si abre las herramientas de desarrollador.

    Probablemente deberíamos tener nuestra propia plantilla y hacer que ese HTML se escupe en la página en lugar de en la consola, para que una persona "normal" pueda obtener algo de esta página. Pr






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Webpack: una introducción detallada

    Webpack: una introducción detallada

    Implemente rápidamente. Implementar inteligentemente Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-webpack-una-introduccion-detallada-909-0.jpg

    2024-05-20

     

    Webpack: una introducción detallada
    Webpack: una introducción detallada

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20