Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update output-management.mdx #6740

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update output-management.mdx #6740

wants to merge 1 commit into from

Conversation

Hydrock
Copy link

@Hydrock Hydrock commented Apr 4, 2023

In Preparation section we see creating two modules:

  1. src/index.js
  2. src/print.js

Inside webpack config we made two enrty points:

entry: {
    index: './src/index.js',
    print: './src/print.js',
},

We, also, made changes inside html:

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
    <title>Output Management</title>
    <script src="./print.bundle.js"></script>
   </head>
   <body>
    <script src="./index.bundle.js"></script>
   </body>
 </html>

We expose print.bundle.js and index.bundle.js module, bucause after building we will have two separated modules

But, there is anoter odd code. We import print.js module inside index.js module. I not understand for what.

We will have separated modules, connected on index.html, but index.js already include print module inside itself. It's weird, or i am stupit.

Please explain me, why we should include print module indide index module?

describe your changes...

  • Read and sign the CLA. PRs that haven't signed it won't be accepted.
  • Make sure your PR complies with the writer's guide.
  • Review the diff carefully as sometimes this can reveal issues.
  • Do not abandon your Pull Request: Stale Pull Requests.
  • Remove these instructions from your PR as they are for your eyes only.

In Preparation section we see creating two modules:

1) src/index.js
2) src/print.js

Inside webpack config we made two enrty points:

```
entry: {
    index: './src/index.js',
    print: './src/print.js',
},
```

We, also, made changes inside html:

```
<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
    <title>Output Management</title>
    <script src="./print.bundle.js"></script>
   </head>
   <body>
    <script src="./index.bundle.js"></script>
   </body>
 </html>
```

We expose print.bundle.js and index.bundle.js module, bucause after building we will have two separated modules


But, there is anoter odd code. We import print.js module inside index.js module. I not understand for what.

We will have separated modules, connected on index.html, but index.js already include print module inside itself. It's weird, or i am stupit.

Please explain me, why we should include print module indide index module?
@vercel
Copy link

vercel bot commented Apr 4, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
webpack-js-org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 4, 2023 5:07pm

@linux-foundation-easycla
Copy link

CLA Not Signed

@chenxsan
Copy link
Member

chenxsan commented Apr 6, 2023

Yeah, it's sort of confusing at the first sight. But how are you gonna use printMe function defined in print.js if you don't import it? And note that it's not exposed as a global variable in our example so you can't just call printMe.

Here's how I would reason about it,

  1. first, you write code in ESM, there's nothing special here even if you're going to use webpack to bundle your code
  2. you decide to output two bundles. In webpack, one entry would only output one bundle, that's why we define two entries. The contrived example is for education purpose, so it might not be easy to reason about.

Hope it helps.

@Hydrock
Copy link
Author

Hydrock commented Apr 7, 2023

Yeah, it's sort of confusing at the first sight. But how are you gonna use printMe function defined in print.js if you don't import it? And note that it's not exposed as a global variable in our example so you can't just call printMe.

Here's how I would reason about it,

  1. first, you write code in ESM, there's nothing special here even if you're going to use webpack to bundle your code
  2. you decide to output two bundles. In webpack, one entry would only output one bundle, that's why we define two entries. The contrived example is for education purpose, so it might not be easy to reason about.

Hope it helps.

First of all, thank you for the answer - it's very valuable.

But. This example is very strange. It is designed for beginners, but only misleads them.

Giving an example of the use of technology, an example is given in order to show the practical benefits of technology. Specifically, in this example, two bundles are created.

But it doesn't make any sense. The print module is already included in the index module.

What is the meaning of the fact that we connected the script tag?

<script src="./print.bundle.js"></script>

it doesn't do anything and only confuses. I think you should agree that the example needs to be redone.

If you wanted to show how the assembly of individual modules works and their application on an html page as separate modules, you need to assemble two separate bundles - for example, in one bundle the hello function, and in the other the print function. Then, connect the modules to the web page using the script tag. And use these functions (modules) on the page itself

What was the point of connecting print at all.a js module on html if the print function which is not even global? It turns out that we already have 2 print functions, while one is not global and there is no access to it.

This is the same if we were explaining to children how gasoline works in a car, but instead of refueling the car, we poured gasoline on the road. It doesn't make any sense.

I am already quite an experienced developer, but even this example has brought me into a stupor, not to mention beginners. Examples should be objective and taken from life tasks, otherwise why else make such wonderful tools as webpack.

I hope for your understanding, I'm sorry if I misunderstood something.

@chenxsan
Copy link
Member

chenxsan commented Apr 7, 2023

Yeah, it's sort of confusing at the first sight. But how are you gonna use printMe function defined in print.js if you don't import it? And note that it's not exposed as a global variable in our example so you can't just call printMe.
Here's how I would reason about it,

  1. first, you write code in ESM, there's nothing special here even if you're going to use webpack to bundle your code
  2. you decide to output two bundles. In webpack, one entry would only output one bundle, that's why we define two entries. The contrived example is for education purpose, so it might not be easy to reason about.

Hope it helps.

First of all, thank you for the answer - it's very valuable.

But. This example is very strange. It is designed for beginners, but only misleads them.

Giving an example of the use of technology, an example is given in order to show the practical benefits of technology. Specifically, in this example, two bundles are created.

But it doesn't make any sense. The print module is already included in the index module.

What is the meaning of the fact that we connected the script tag?

<script src="./print.bundle.js"></script>

it doesn't do anything and only confuses. I think you should agree that the example needs to be redone.

If you wanted to show how the assembly of individual modules works and their application on an html page as separate modules, you need to assemble two separate bundles - for example, in one bundle the hello function, and in the other the print function. Then, connect the modules to the web page using the script tag. And use these functions (modules) on the page itself

What was the point of connecting print at all.a js module on html if the print function which is not even global? It turns out that we already have 2 print functions, while one is not global and there is no access to it.

This is the same if we were explaining to children how gasoline works in a car, but instead of refueling the car, we poured gasoline on the road. It doesn't make any sense.

I am already quite an experienced developer, but even this example has brought me into a stupor, not to mention beginners. Examples should be objective and taken from life tasks, otherwise why else make such wonderful tools as webpack.

I hope for your understanding, I'm sorry if I misunderstood something.

Thank you for the explanation, now I see the problem after running the code. I agree the contrived example is bad, will see how we can improve it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants