Estoy tratando de usar el paquete web en ES6 pero hay algo mal, se crea el paquete pero parece que no contiene nada.
src/index.js
console.log("inside"); export const testData = 15;webpack.prod.js
import path from "path"; import HtmlWebpackPlugin from "html-webpack-plugin"; export default { entry: { myApp: './src/index.js', }, plugins: [ new HtmlWebpackPlugin({ title: 'Production', }), ], output: { filename: '[name].bundle.js', path: path.resolve(".", './dist'), clean: true, module: true, libraryTarget: 'umd' }, module: { rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: "babel-loader", include: path.resolve(".", "src") } ] }, mode: "production", devtool: "source-map" };paquete.json
{ ... "scripts": { "build": "webpack --config ./webpack.prod.js" }, "devDependencies": { "html-webpack-plugin": "5.5.0", "path": "0.12.7", "webpack": "^5.72.0", "webpack-cli": "^4.9.2", "webpack-dev-middleware": "5.3.1", "webpack-dev-server": "4.8.1", "webpack-merge": "^5.8.0", "babel-core": "6.26.3", "babel-loader": "8.2.5", "babel-preset-es2015": "6.24.1" }, "type": "module" ... Después de crear el paquete, el archivo index.html dentro de la carpeta dist inserto un registro, pero cuando se inicia no muestra el registro y me da el error testData is not defined
dist/index.html
... <head> <title>Production</title> <script defer="defer" src="myApp.bundle.js"></script> <script> window.addEventListener("load", () => { console.log( "window load" ); console.log( "testData" ); console.log( testData ); // <--------------------- it give the error }, false) </script> </head> ...```Dado que está exportando valor constante, que se disuelve en el proceso de optimización de compilación y paquete web. Es mejor hacerlo parte de algún módulo y exportarlo. Con pocas modificaciones puedes conseguir lo que esperas.
export default { fuel: 100, passengers: 7, target: 'mars', launch: function () { console.log('Saturn VI ready to launch'); }, reportPorblem: function () { return 'Houston, we have a problem'; }, land: function () { console.log('Saturn VI landed successfully') } }; Eliminar module: true de la salida, qué es lo que puede aprender aquí .
También debe realizar algunos cambios en la salida en el paquete web. Elimine libraryTarget y agregue la library a la salida. Con el nombre de la biblioteca aquí es MyLibrary , puede acceder a los detalles exportados. La propiedad de tipo establece cómo se expone el módulo, el paquete web le permite exponer su módulo con ciertos estándares con libraryTarget o library.type . Aquí se espera que sea var .
output: { ... library: { name: 'MyLibrary', type: 'var', export: 'default', }, },Hay muy pocas opciones compatibles con webpack.
Puede obtener más información sobre libraryTarget aquí
Así que finalmente puedes acceder a todo lo que quieras desde la biblioteca MyLibrary .
<script> window.addEventListener("load", () => { const mySpaceShip = MyLibrary; console.log(`Traveling to ${MyLibrary.target} with ${MyLibrary.crewmates} crewmates`) }, false) </script>