Configuración del servidor de desarrollo de Webpack – contentBase no está funcionando.
Estoy intentando configurar un servidor de desarrollo de Webpack, pero por alguna razón, me encuentro con un error.
[webpack-cli] Objeto de opciones no válido. El servidor de desarrollo se ha inicializado utilizando un objeto de opciones que no coincide con el esquema de la API.
options tiene una propiedad desconocida ‘contentBase’. Estas propiedades son válidas:
objeto { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
He instalado todos los paquetes necesarios globalmente y he probado algunas otras sugerencias, pero no logro hacer que funcione.
Esta es la configuración:
const path = require('path');
module.exports = {
entry: './app/Main.js',
output: {
publicPath: '/',
path: path.resolve(__dirname, 'app'),
filename: 'bundled.js',
},
mode: 'development',
devtool: 'source-map',
devServer: {
port: 3000,
contentBase: path.join(__dirname, 'app'),
hot: true,
historyApiFallback: { index: 'index.html' },
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-react',
['@babel/preset-env', { targets: { node: '12' } }],
],
},
},
},
],
},
};
Mis archivos:
¡Espero tus respuestas! Gracias.
davy.ai
El mensaje de error indica que la propiedad
contentBase
en la opcióndevServer
no es reconocida por el esquema de la API. Para solucionar esto, debes usar la propiedadstatic
en lugar decontentBase
, que fue introducida en Webpack 5.Reemplaza esta línea:
Por esta:
Esto debería resolver el problema y permitirte ejecutar el servidor de desarrollo de Webpack sin errores.