Tengo un problema con el servidor de desarrollo de paquetes web porque parece que no puedo probar mi biblioteca porque parece estar vacía en el navegador web. Un ejemplo sencillo:

mi src/index.js

 function test() { console.log("test"); } export { test }

Mi paquete.json

 { "name": "testpackage", "version": "0.0.1", "description": "", "module": "dist/index_bundle.js", "scripts": { "build": "webpack", "start": "webpack serve --open", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^5.3.2", "webpack": "^5.48.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" }, }

Mi webpack.config.js

 const path = require("path") const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: path.resolve(__dirname, "src/index.js"), output: { path: path.resolve(__dirname, "dist"), filename: "index_bundle.js", library: "$", libraryTarget: "umd", }, devtool: 'source-map', devServer: { contentBase: './dist', port: 9000 }, plugins: [ new HtmlWebpackPlugin({ title: 'Test', }), ], mode: "development", }

Si inicio el servidor de desarrollo con npm run start , aparece la página en blanco. Pero el objeto $ parece estar vacío al intentar acceder a él a través de la consola. Mirando la fuente de la página, el script de compilación parece haber sido generado y colocado cuidadosamente en una etiqueta de script.

Si construyo el paquete y hago una página html con una etiqueta de secuencia de comandos que apunta al archivo creado en la carpeta dist/, el paquete simplemente funciona.

¿Que me estoy perdiendo aqui?