'Webpack in ES6 create an empty bundle
I am trying to use webpack in ES6 but there is something wrong, the bundle is created but it seems to contain nothing.
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"
};
package.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"
...
After creating the bundle, the index.html file inside the dist folder I insert a log but when it starts does not show the log and gives me the 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>
...```
Solution 1:[1]
Since you are exporting const value, which get disolve in build and webpack optimization process. It's better to make it part of some module and export it. With few modifications you can get what you are expecting.
index.js
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')
}
};
Remove module: true from output, what it is you can learn here.
output.library
Also you need to make few to changes to output in webpack. Remove libraryTarget and add library to output.
With library name here it's MyLibrary you can access exported details. Type property set how module to be exposed, webpack allow you to expose your module with certain standards with libraryTarget or library.type. Here its expected to be var.
webpack.prod.js
output: {
...
library: {
name: 'MyLibrary',
type: 'var',
export: 'default',
},
},
There are quite few options supported by webpack.
- libraryTarget: "umd", enum
- libraryTarget: "umd-module", ES2015 module wrapped in UMD
- libraryTarget: "commonjs-module", ES2015 module wrapped in CommonJS
- libraryTarget: "commonjs2", exported with module.exports
- libraryTarget: "commonjs", exported as properties to exports
- libraryTarget: "amd", defined with AMD defined method
- libraryTarget: "this", property set on this
- libraryTarget: "var", variable defined in root scope
You can learn more about libraryTarget here
So finally you can access all you wanted from library MyLibrary.
<script>
window.addEventListener("load", () => {
const mySpaceShip = MyLibrary;
console.log(`Traveling to ${MyLibrary.target} with ${MyLibrary.crewmates} crewmates`)
}, false)
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | MORÈ |