es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Utiliza babel-loader y less-loader juntos, algunos incluidos no funcionan.

11 Jul, 2023 Programación

Descripción

cuando solo uso babel-loader o no importo ningún archivo less, webpack funciona normalmente.

pero cuando importo less, la inclusión en babel-loader no funciona o si configuro la inclusión en modules.rules[0] se lanza un Error

Configuración de Webpack

module: {
    rules: [{
        test: /\.ts$/,
        use: [{
            loader: "babel-loader",
            options: {
                presets: [
                    ["@babel/env", {
                        targets: {
                            ie: "11"
                        },
                        corejs: "3",
                        useBuiltIns: "usage"
                    }]
                ]
            }
        }, "ts-loader"],
        exclude: /node_modules/
    }, {
        test: /\.js$/,
        use: [{
            loader: "babel-loader",
            options: {
                presets: [
                    ["@babel/env", {
                        targets: { ie: "11" },
                        corejs: "3",
                        useBuiltIns: "usage"
                    }]
                ]
            }
        }],
        include: /html-entities/,
        exclude: /node_modules/
    }, {
        test: /\.less$/,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: "postcss-loader",
                options: {
                    postcssOptions: {
                        plugins: [
                            [
                                "postcss-preset-env",
                                {
                                    browsers: "last 2 versions"
                                }
                            ]
                        ]
                    }
                }
            },
            'less-loader'
        ],
        exclude: /node_modules/
    }]
}

Imagen

ver descripción de la imagen aquí

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que al importar archivos less, la inclusión en babel-loader no está funcionando y establecer la inclusión en modules.rules[0] está generando un error. La configuración de Webpack proporcionada muestra tres reglas: una para archivos .ts, otra para archivos .js y otra para archivos .less.

    La primera regla aplica tanto babel-loader como ts-loader a los archivos .ts, con una exclusión para la carpeta node_modules.

    La segunda regla aplica únicamente babel-loader a los archivos .js, con una inclusión para la carpeta html-entities y una exclusión para la carpeta node_modules. Esto sugiere que solo los archivos en la carpeta html-entities deben pasar por babel-loader.

    La tercera regla aplica varios loaders a los archivos .less, pero no aplica ningún loader específico para babel o jsx.

    Sin información adicional ni mensajes de error, es difícil determinar la causa raíz del problema. Sin embargo, en base a este contexto, una solución potencial podría ser modificar la segunda regla para incluir archivos o directorios adicionales que requieran babel-loader. Otra solución podría ser modificar la tercera regla para incluir babel-loader antes que los otros loaders.

Comments are closed.