Cuando ejecuto npm start en mi proyecto, aparece un error que dice:
[webpack-cli] Objeto de configuración no válido. El paquete web se ha inicializado con un objeto de configuración que no coincide con el esquema de la API.
- la configuración tiene una propiedad desconocida 'módulos'. Estas propiedades son válidas: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, InfrastructureLogging?, loader ?, ¿modo?, ¿módulo?, ¿nombre?, ¿nodo?, ¿optimización?, ¿salida?, ¿paralelismo?, ¿rendimiento?, ¿complementos?, ¿perfil?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolver?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? } -> Objeto de opciones proporcionado por el usuario. Para errores tipográficos: corríjalos. Para las opciones del cargador: webpack >= v2.0.0 ya no permite propiedades personalizadas en la configuración. Los cargadores deben actualizarse para permitir el paso de opciones a través de las opciones del cargador en module.rules. Hasta que se actualicen los cargadores, se puede usar LoaderOptionsPlugin para pasar estas opciones al cargador: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // puede aplicar esto solo para algunas opciones de módulos: { módulos: … } }) ]
Actualicé webpack (v5) y seguí las instrucciones de webpack v5 doc en css loaders ( https://webpack.js.org/api/loaders/#thisgetoptionsschema ) y mi webpack.config.js se ve así:
webpack.config.js
const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") }, modules: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, ], }, };índice.js
import {run} from "./app/app"; import "./main.css"; import { AlertService } from "./app/alert.service"; import { ComponentService } from "./app/component.service"; const alertService = new AlertService(); const componentService = new ComponentService(); run(alertService, componentService);principal.css
body{ background-color: purple; }devDependencias
"devDependencies": { "css-loader": "^6.5.0", "style-loader": "^3.3.1", "webpack": "^5.61.0", "webpack-cli": "^4.9.1" }Puede alguien ayudarme.
Todo se ve bien, excepto una clave de objeto. De acuerdo con la configuración del paquete web , sus cargadores estarán dentro de la matriz de reglas, que es la clave del objeto del módulo .
En su archivo de configuración, tiene módulos en lugar de módulo . Por favor, cambie eso y avíseme si funciona :)
Configuración correcta
const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, ], }, };