Webpack issues

JavaScript
22

Well it depends if you need an actual exit code, e.g. for deployment or git hooks; but either way you’ll get an error message when something goes wrong.

Yes, the watch mode by itself doesn’t make any difference.

Don’t put anything inside your output directory manually – typically you’ll actually add it to your .gitignore anyway, and clean it before the production build. The point of using a module bundler is that anything you import in your source code will get included in the bundle, so you can for instance add jQuery as a dependency:

yarn add jquery

And then import it in your source code like so:

import $ from 'jquery'

$('#my-button').click(() => alert('Hello world!'))
1 Like
23

Ok. That makes sense. Since I’ve a index.html which looks like this. This one doesn’t have any React code.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>My Project</title>
    <link rel="stylesheet" href="built/style.css"/>
    <script type="text/javascript">
        function getFiles() {
            
            // Do something
            }


    </script>
</head>
<body>

<div id="myProjectDisp"></div>
<button id="myProjectButton" onclick="getFiles()">Request Files</button>
<script src="built/bundle.js"></script>

</body>
</html>

After installing jquery as yarn add jquery, would you recommend to place this line import $ from 'jquery' inside the <script> </script> tag?
Similarly, for other libraries as well after installing?

24

No, you import it in each file where you are actually using it; webpack will then include it in the bundle and inject it into your modules. It is all contained in your bundle.js then.

BTW with webpack every module gets wrapped in a function; this means that you can’t pollute the global namespace by just declaring a function at the top level of your script (just like it is the case with native modules). So if you still want to use inline JS, you’ll have to expose the function explicitly:

window.getFiles = function () {
  // ...
}

But of course, better avoid inline JS altogether:

function getFiles () {
  // ...
}

document
  .getElementById('myProjectButton')
  .addEventListener('click', getFiles)
25

Thanks. I am little bit confused. Since index.html is the file where I am using Javascript inside <script> tag, so where would the import thing would go?

26

Now I’m getting confused too… ^^ if you’re using webpack, why do you actually have JS in your index.html next to the bundle? What does your src/static/app.js do?

27

Are you referring to this line of code?

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

28

No to these:

    <script type="text/javascript">
        function getFiles() {
            
            // Do something
            }


    </script>

Which, using webpack, would be supposed to look something like this:

// src/static/get-files.js
export function getFiles () {
  return 'Do something'
}

// src/static/app.js
import { getFiles } from './get-files.js'

document
  .getElementById('myProjectButton')
  .addEventListener('click', getFiles)

<!-- index.html -->
<script src="built/bundle.js"></script>

Or using native modules for that matter:

<!-- index.html -->
<script nomodule src="built/bundle.js"></script>
<script type="module" src="src/static/app.js"></script>

You can of course use your “regular” non-module JS as well, but in your OP you mentioned you’re using webpack… oO anyway you can read a more in-depth guide to modules here:

http://exploringjs.com/es6/ch_modules.html

And with webpack that compiles to a bundle that 1) runs on legacy browsers, and 2) can import basically anything such as node modules, and, with the appropriate loader(s), CSS, JSX, TS etc.

29

I see. Thanks very much for elaborating on this. Actually, I am looking at someone else’s code so not exactly sure why they used this instead of using webpack. But based on my understanding that person was trying to keep this part outside of webpack thing. I think only react part was supposed to go into bundle.js and not the following part:

<script type="text/javascript">
        function getFiles() {
            
            // Do something
            }


    </script>

It looks like what I was trying to achieve above (to include my getFiles() function related code into bundle.js might not work in this scenario since I want to keep getFiles() function outside of bundle.js. Considering this, I think my questions is reduced to a much simpler one now:

If I want to include addition JS files, which I mentioned in the screenshot of this post above, in which directory these files should go?

Right now, I am using CDN links in my index.html and it seems to be working fine. But I want to keep it locally somewhere (I believe other than the built folder) so that if CDN link changes, it would not break my code.

Thanks !

30

Then yes I wouldn’t put any files inside the build folder manually; keep your 3rd party libraries in a separate vendor folder or something and copy them over during the build step (or directly from the node_modules for that matter).

31

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.