HI everyone hope you are going well!
First of all I am a backend developer, not a frontend, but I do lots of front-end code as well however I never used Webpack in the past and I ended looking for webpack because of my requirements that are pretty much the follows:
- Instead of use old JS way, I am using modules to decouple program logic into components
- I need to bundle and minify those js into one bundlefile.
- I need to pass server data to those functions inside the modules like JSON objects coming from the server.
For start I have the following configuration files for:
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
mode: 'development',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
package.json
{
"name": "testWebpack",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.13.0",
"webpack-cli": "^4.3.1"
},
"dependencies": {
"lodash": "^4.17.20"
}
}
and the JS is pretty basic such for this example:
srcperson.js
export default class Person
{
constructor()
{
this.Name = "Your name";
}
}
and srcmain.js
import _ from 'lodash';
import p from './person';
export default function myTempFunction(allData)
{
// Lodash, currently included via a script, is required for this line to work
const value = _.join([allData.welcome, new p().Name], ' ');
console.log(value);
}
// myTempFunction({
// welcome: "Hello"
// });
distindex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
<script type="module">
import myTempFunction from './main.js';
myTempFunction({
welcome: "Hello from the server"
});
</script>
</body>
</html>
when running I get an
The requested module './main.js' does not provide an export named 'default'
My idea is that in the server (I am using asp.net core) I am producing a JSON which I wanna pass to this modules and I need to pass the object inside the main function.
As you can see I have commented the myTempFunction inside srcmain.js. If I uncomment that works but at that stage I don't have my serverData to pass.
I really searched on the web but I can't find any solution for this, maybe I am going something wrong in my thinking and I am feeling a bit odd.
At the same time It may feel right to do what I do inside the <script type="module"> but Make no sense because I want to get that function from webpack instead of loading the module using the Browser engine.
Any idea from the frontend devs where can give me an hint? I would love to hear your thoughts.
