WebPack múltiples entradas con múltiples salidas ( filename ) personalizadas

Saludos Red 👋👋

Tratando de controlar la inyección automática de los polyfills para los Web Components en el HTML para así poder tener un entorno de desarrollo más amigable para mí ya que voy a empezar a usar https://storybook.js.org/ para sacar las demos de los Web Components.

storyBook 👉👉 open-wc.org https://open-wc.org/demoing/#setup

Los de open-wc.org proporciona un entorno de desarrollo para los Web Components está bueno pero no tanto “es-dev-server”, ellos implementan los storybook, Genial!! 😘😘 y voy con ellos después, pero los servidores de ellos para desarrollar no son tan geniales al menos para mi no lo fueron 😢, ejemplo:

package.json

{
   "scripts": {
      "start:compatibility": "es-dev-server --app-index demo/index.html --compatibility all --node-resolve --open --watch"
   }
}

La bandera “ — compatibility” activa la compatibilidad hasta cierto límite usando Babelio, bien uno de mis componentes usa la librearía moment.js y hasta hay llego todo, la activación de este amigo hace que se sustituyan algunos import por su equivalente pero cuando la cosa se profundiza es decir hay otros import dentro de otros archivos hay se pone feo, muí feo hasta el punto de crear mi propio entorno de desarrollo y seguir usando mi demo simple ‘demo/index.html’ no lo de los storybook esta es otra historia.

Entonces con esta configuración que cree para Webpack me va de 100 puntos ya que puedo usar los polyfills que yo quiero, también logre controlar su inyección desde consola con una bandera “ — den-compatibility”, “ — den“ por mi nombre Dennys je je je je

Los polyfills que uso son @webcomponents/webcomponentsjs/webcomponents-loader.js

https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

webcomponents-loader.js este amigo carga los polyfills para los Web Components necesarios según el caso o el browser que se está usando.

Este extrae la ruta del script para referencia de donde va a cargar los polyfills necesarios.

Es decir del src de la tag script

<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Al menos que se especifique la rutan fija ANTES como lo indican ellos:

<script>
window.WebComponents = window.WebComponents || {};
window.WebComponents.root = 'node_modules/@webcomponents/webcomponentsjs/';
</script>

Pero!

Je je je yo y mis peros, yo quiero un HTML limpio solo para meter hay mis custom tags hablo del ‘demo/index.html’ entonces si o si tenía que manejar las salidas de los archivos en el archivo de configuración de Webpack y así fue que engendre el niño que aquí se los comparto, espero que a alguien le sea útil, pase un buen rato con esto.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = (env, argv) => {
    const entry = {};
    // polyfills
    argv['den-compatibility'] && (entry.polyfills = './node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js');
    // web component
    entry.wc = './dile-date-without-calendar.component.js';
    return {
        devtool: 'source-map',
        entry: entry,
        output: {
            filename: (data) => data.chunk.name === 'polyfills'
              ? 'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js?=[chunkhash]'
              : '[name].[chunkhash].js'
        },
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: "demo/index.html",
                filename: "demo/index.html"
            })
        ]
    }
};

Con chunk.name identificamos los puntos de entrada y pues se decide que hacer, filename lo convertí en una función de fecha y Voila la magia del Cine!!!

Mi package.json

{
   "scripts": {
     "start": "webpack-dev-server --mode development",
     "start:compatibility": "webpack-dev-server --mode development --den-compatibility",
     "build": "webpack --mode production",
     "builddev": "webpack --mode development"
   }
}

Hasta la próxima 👋