Webpack Build - How do I control where the build-file goes?

Coding Help
1

Here’s the link to the example project (copied from another existing glitch project):

In the webpack.config.js file, if I try to change the output path to anything else other than what it was originally, the bundle.js file doesn’t show up anywhere (yet there is no error message in the console). Where is the file being saved? How do I control where the file goes?

If you’re wondering why I’m trying to change output path, it’s because I’m trying to learn how this thing works.

Thanks

2

Hi @LiChoi – I’m no webpack expert, but I have used it (and broken it) many times, so I thought I’d take a look. I noticed that even if I commented back in the original path and then modified the component (changing the text in the HelloWorld component) that the changes the aren’t reflected in the app (even on reloading.) This suggested to me that there might be some other bug getting in the way of your debugging – are you also seeing this behavior, or is it a problem on my end?

3

The original path:

path.resolve(__dirname, ‘src/output’)

worked for me (it was updating, and I could see the changes on the live app).

But now it’s not working. I think I ran ‘npm run build’ too many times, and now glitch is locking me out? (or maybe because we were running it at the same time?)

4

Oh that’s interesting. You ran it through the command line? I wouldn’t think that the sheer number of times would lock you out, since (as far I understand) the default behavior for the app is for it to build and refresh every time it senses changes to the code. There might be some other kind of snag though – I’ll try making a fresh project and testing the output. I’m glad you posted this question, I’ve been telling myself to learn how webpack works for months haha

5

On the original project, I made changes without running build on command line, and the changes weren’t made on the bundle.js file, so I think it needs to be run on command line with each change.

6

Hmm… The story gets weirder.

So I’m rifling through the folders via the command line, typing ls (list directory), cd (change directory) to whatever folder etc. It seems webpack WAS building into the folders I specified.

I had webpack output bundle.js to a folder called ‘anotherfolder’, and there it is inside the command line!

Yet it’s not showing up in the side bar for some reason…

7

Oh you know what, I think I’ve read something in the forum about the need to sync up the files visible editor and visible in the command line – I wondered if they would be hidden somewhere! I’ll dig around and see if I can turn it up.

8

I’ve deleted all the extra folders and bundle.js files I created. I still can’t run npm run build. It says permission denied on the console. I think I must have hit some sort of limit and now I’m locked out. Anyway, let me know when you find that topic about making files visible on the bar. webpack is working - I just need a way to see it in the GUI.

9

AHA! Apparently you just need to run refresh in the console, like magic :tophat: :rabbit2: ! Let me know if this doesn’t work! Hiddens folders/files from dashboard

2 Likes
10

Thanks for finding that.

It didn’t work, though. I manually created a folder in the command line, then refreshed console. The new folder didn’t appear in the side bar.

11

Nevermind. In order for the folder to appear, there needs to be a file inside of it. I ‘touched’ a new file into the folder and ran refresh. the folder showed up in the side bar.

Thanks for your help!

All I need to do now is make react + webpack actually work for my real project…

2 Likes