❗❗ IMPORTANT UPDATES ❗❗ ### webpack-dev-server update `webpack-dev-server` released version 4 on 2021-08-18, which has a breaking change for this video. In the `webpack.config.js` file, under `devServer`, the `contentBase` property has been changed to `static`. If you use `contentBase`, like I do in the video, you'll get an error. You can either use `webpack-dev-server` ^3.11.0 (which is what this video uses) and just follow along with the video, or you can install the latest and update to the required change. Here is the link to the webpack docs for this property: webpack.js.org/configuration/dev-server/#devserverstatic And here is a link to the migration guide from v3 to v4: github.com/webpack/webpack-dev-server/blob/master/migration-v4.md ### WINDOWS USERS Some of the scripts I make to set environment variables will not work on Windows. I've made a video to fix that issue here: ruclips.net/video/t9okUDkRUDc/видео.html ### Hot Reloading issues Your issue might be different, but just in case -- If you are having troubles with hot reloading check out this video, also in the Webpack playlist on my channel, which shows a fix: ruclips.net/video/lNkVndKCum8/видео.html
You deserve growth. I will share this video with all my friends and tell them to share it more. I'll always be thankful for your gatsby tutorial. Helped a lot.
I'm hooked! I am a new subscriber! 1) You did NOT spend the first 7 to 10 minutes talking about yourself 2) You speak clearly and are relatable 3) Your points are not verbose but concise Just Thank You
GREAT Vid.... Straight to the points with examples and demonstration. I've watched many others on this full of BS that don't really understand what they are doing and just talk about it.
I think this is the most easiest video on webpack, by far the best one I've seen. Can't thank enough. I was struggling to understand webpack, babel with this video I was able to do it by myself. Thanks again.
Damn, I already was so angry with webpack because I felt like I would never get behind it and see its benefits. You explained the basics so neatly and simple that it all makes sense now. Thank you so much for this! You got my sub! I can already see this channel getting big
Many many thanks for explaining the topic with such clarity. I am grateful for your minimal approach to building a final result, rather than "let me show you how cool I am by demonstrating this very complex gibberish".
A very goo video. For those who are following along ("now") and having some issues with the dev server (webpack-dev-server), try to downgrade your version. Before I downgraded my version from 4.X to 3.X it wouldn't work. The error message I got was: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. Date: 2022/04
Thanks for the heads up for everyone. I put this issue in the pinned comment but unfortunately I can't annotate a video after it's up anymore (youtube changed that some time back)
Great straight to the point video. Actually clicked off of the freeCodeCamp video to here since he was barely talking about webpack 20 minutes into the video.
Amazingly explained, very practical approach and smoothly delivered. I am right now setting up webpack for my brand new React Typescript project. This is very helpful. All the best for your future works!
looked into documentation, looked other info sites and couldn't understand what that thing actually does. This video just have put everything on it's places. Thanks!
Great video! You have a concise, but thorough presentation style. I also really appreciate your calmness, so many dev channels go a mile a minute which is frankly annoying.
I really appreciate you saying so, thank you. It's easy to feel like your own videos are getting too long and to want to speed through parts, so I am always happy to hear that someone appreciates the time spent on clarity. The balance is really tough.
The way this video proceeded, initially without webpack, then bare minimum requirement, and then incremental approach, itself shows how crystal clear the concepts of this guy are. Totally loved the video.keep up the good work. Subscribed!! 😍😍
Wow you are playing "John Wick as a Software Developer" Hehe. Thanks for awesome explanations I like the way you are coding and yes I was stuck in setting up webpack for a while now.. It was really helpful!
finally a webpack video I can make sense of. This greatly helped my comprehension. Better watch out Colt Steele, Swashbuckling with code is coming for you!
finally someone shoing the SRC folder thing, i spent a whole day trying to fix it and tutorials dont show it, subscribed, these things are so complex, i thought not even jesus could help me
I'm that type of guy that never comments on anything, just scrolls, but maaan... I must say, you've really impressed me, you have a gift for sharing knowledge, great content quality it would be a pleasure to see you grow. Ofc i've subbed and ringed the bell immediately. You are truly a knowledgeable man. @Edit I've noticed you are using quite a few keybindings and tricks when dealing with the code, would love to see a video explaining how to setup vs code or what vs code tricks and tips are worth mentioning Best Regards Friend from Poland
First time I make webpack work fine and I understand what it does. The only problem I had was that I couldn't use "NODE_ENV=production" in the script, it returned "'node_env' is not recognized as an internal or external command" but I fixed it using --mode=production. Thanks a lot.
Thank You for sharing. It is incredible. I follow and understand every word. I wish I did find You before I bought a bunch of courses that gave me exactly nothin but frustation. Thank You
It is quite the pick-me-up to hear this, thank you. Also, sometimes those frustrating studies that seem to give nothing are a needed period for your brain to start loading up a subject until you find a clear source. Just my 2 cents and something I consider when being frustrated at no results.
2:59 went down hour-long rabbit hole to figure out what witchcraft was used to have a "take" command mkdir and cd. Still not completely clear, but realized it wasn't really mission critical.
Yah, in hindsight I regret using that without a disclaimer. I have a video covering that and other commands here: ruclips.net/video/Xpp8DW2eUUA/видео.html
@@SwashbucklingwithCode Old dog is not compatible with new tricks. I've spent most of the day trying to figure out how jquery and jquery plugins like jquery validate work with webpack. I came upon webpack looking to get away from grunt and gulp for minifying/uglifying js, compiling sass and minifying css. The more tools that are made to make life easier for developers, it seems that the workflow gets more and more complicated until it's the furthest thing from easier.
@@thebassuniversity Things have gotten pretty complex for many setups, and it's very intimidating when you don't work with them consistently. But when you take into account all the complications that browsers introduce to a language updating, it starts to become clear why the tools are so complex. If you are looking for simplicity, Parcel is is pretty amazing and does a lot for you. I prefer Webpack for more complex stuff, but Parcel is great for many projects.
@@SwashbucklingwithCode My big issues isn't really the complication, it's the learning curve for the utility time. Seems like I'm changing workflows completely every couple of years, which can leave me with legacy projects over 3 different task runners/bundlers. Thankfully I did stumble upon the answer to my jquery issue. I can continue to use the jquery CDN with externals: { jquery: 'jQuery' } Now I can continue my test implementation.
@@SwashbucklingwithCode Zipping right along with webpack now. Your video helped get me in the right direction. The missing link for me was that, out-of-the-box, webpack bundles and minifies js. Once you specify things, you are undoing some default behavior. For instance, a custom entry point removes src as the default entry point, a custom minifier for css removes tercer for js. This seems obvious once you realize that these are not additive, but they replace, so you need to add the defaults back. To a new user, when everything was working automagically, it seemed like I broke something, so I was looking for fixes to things that weren't broken.
As you said in the beginning Angular or Vue.js make it easy to start developing web apps since they hide the complexity of tools like webpack. But after some time you will ask yourself, how the content of the dist folder is generated. This video uses the minimum setup to provide an answer to that question. Simply reproduce the steps shown and you will have a much better understanding of web apps. I am a professional web developer but I have to admit that I learned a lot from that video!
Hello! It`s a very good video, but I`ve a problem (13:27). There wasn`t any error in the webpack during compilation. But.. When I tried to open a Browzer (Firefox 93.0) - there was an error "Uncaught TypeError: e.getClasses is not a function". Here is my configuration: "devDependencies": { "webpack": "^5.57.1", "webpack-cli": "^4.8.0" }
@@SwashbucklingwithCode Oh, sorry bout that! I stopped at the Babel part as that was less relevant for me. I love your teaching style buddy, just not a fan of most of the subjects currently present on your channel. Are you planning on doing any of these: Modern WordPress Development (with Roots.io stack), Laravel, PHP OOP, Docker, Laravel Mix, Vagrant, deploying to DigitalOcean?
@@tomdevisser8150 No need to apologize at all, I love when people leave tips for me and the rest of the viewers. I was just mentioning it was there because I just put it up a few days ago.
@@tomdevisser8150 I am not planning on covering any of that besides Docker and maybe Digital Ocean at some point. I'm not into the PHP side of the world, sorry.
at min 21:34, how did you see the view main.js:formatted. Mine wasnt giving that option even tho in console the path showed main.js:formatted... hmmm. any thoughts? is this why i did not see all the extra code you referred to? I only got: (() =>{ 'use strict'; console.log('ran from index.js'), console.log('gandalf'), console.log('xena'); console.log({ a: 'alpha', b: 'bravo', c: 'charlie' }) }) (); using FF btw and get this warning when run npm run build: WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: webpack.js.org/configuration/mode/ seems won't go into development mode. tried many ways to do so with no luck. suggestions greatly appreciated.
ok, anyone else getting the above warning, I found a fix: in the terminal: (pass as a CLI argument) webpack --mode=development NOTE: the above must be run every time you want to see in development mode (reverts back to production mode after a 'npm run build') with this, it doesnt need the devtool: 'sourcemap' in the webpack.config.js file in order to map the sources! :) (with or without devtool: 'sourcemap' NO main.js.map gets created...) if anyone figures out how to make dev mode work without having to running 'webpack --mode=development' everytime you need it... would love to hear it!
It's a good question. "__dirname" is a global variable available when running scripts, and "path" is is a module with utilities, and modules need to be imported. This is made more confusing, to me at least, by the fact that running "node" in your terminal and trying to log "__dirname" will be undefined, since it isn't actually a script you are running, but "path" will be available. This is just one of those everyday node things you get used to, but don't let that stop you from investigating more if you are really curious.
@@SwashbucklingwithCode I agree, that does make it more confusing. Also realised I probably don't know what a script is, in this regard. more investigation to follow!
Thank you for the greatest video for the newbie! I did not understand one thing though: You manually copied index.html to ./dist folder, but you never mentioned index.html when working with ./public folder. Apparently it must have worked, but how did index.html get there (within the bundle file?), and if not, from where was it served? And how it is supposed to be served? I am working on Typescript Aurelia project now, and while all the resulting .js files are copied to the ./dist folder, .html files are not, and nothing works obviously.
very good work , i"ve started with the official webpack documentation ( since it's good practice ) and it was a little confusing because they explain every detail. a simplified explanation like this may be good start to dive deep in the docs later. ps: i've noticed that you're using oh my zsh with the vim ext for vscode! would you please make a video about tips, enhancing productivity and best configs ? nice work again thks!!!
Glad it worked for ya. For oh-my-zsh and general terminal tricks I have a short video on the channel ruclips.net/video/Xpp8DW2eUUA/видео.html It's a good suggestion overall, I'll have to think of a digestible format for Vim+VSCode. Thanks.
Thanks for the knowledge. Please you can zoom your text editor a little bit so that those of watching with small screen phone can follow along as you type out the codes. I have to switch to my laptop to be able to follow. Thanks so much.
I'll definitely look into it and consider it more in the future. Right now it already is zoomed in about 300% of my norm and the balance between code real-estate and readability is tough. If you have multiple examples of other channels that do this well I'd love to take a look, as I actually see most other channels having similar or smaller zoom than mine.
So at 14:15 in your tutorial, I followed you down to the letter and my console is throwing me an error saying " (0 , e.getClasses) is not a function" why is that occurring?
Thanks for the video! I'm a fan of the style of explanation. You've got yourself a new subscriber and I've shared the video. I also dig your simple terminal setup. I browsed your blog in the hopes I'll see a walkthrough of how you set it up, but it's not there. What did you use? I especially like the way the command you write turns from red to green (guessing it happens when it finds a valid one?) Also, happy new year! 🥳
Thank you, kindly. I'm in the process of re-working my blog and I plan to have a post about all my settings. For now, I'm using .zsh with these 2 lines in my .zshrc file source ~/.config/git-prompt.zsh PROMPT='%F{cyan}%~%f $(gitprompt) %(?.%F{green}$%f.%F{red}$%f) ' The `git-prompt.zsh` can be found here: github.com/git/git/blob/master/contrib/completion/git-prompt.sh
Small question: Let's say you have your ESnext code split into different files, and you want some ES5 code running in your browser. Babel will take care of transpiling ESNext to ES5 And webpack will bundle it up together so the browser can gobble it But what's the order of operations? Does the code get bundled and then transpiled, or does it get transpiled and then bundled?
I have never checked, myself. I'd guess bundled first, otherwise it seems like it would inefficiently transpile the same imports many times, even when it only uses it once in the end. What makes you ask, just curiosity or something else?
Thanks for the video it is really helpful. And I have a question if someone could answer it: Why do we need to execute 'npm run build' and when running dev server we can execute it with 'npm start' without the 'run' (it works with run as 'npm run start' as well). 'npm build' does not seem to work without the 'run'. Thanks again!
`npm start` and `npm test` are two commands that are common enough to have a shorthand built into node. I don't know why, but that's how it's been for a long time. every other command is "custom" and needs `npm run` in front of it.
Great video! I just have one question about import/export. What if I would like to export a whole class and want be able to create a new instance of thar object and somehow mke the object accesible in my html file or instace the object there? Is it possible? If so, do You have any advice how to do that? Thank You in advance!
If I'm understanding the question correctly: Any javascript that you want to be "accessible in html" is really just html events calling functions/properties in an already loaded script. So, you certainly can export a class and import it + instantiate, but to try it out in html I'd start with a class in a single file and hook up a button or something to call the function that creates a class instance. That was difficult to put into words, haha. I don't have a video around this topic, but it is somewhat normal webdev flow but there are some layers to understand first. Particularly, you need "state" of some sort to keep track of the instance. Apologies if I made too many assumptions off that question.
I whipped up a gist you can try out if I'm on the right track of understanding the question: gist.github.com/Jimmydalecleveland/c5702562b87efa9f7943848886ae0c52
@@SwashbucklingwithCode I know my question is kaotic, english is not my first language and I'm very thankfull that You are really trying to help. I will try to write it down and explain better. Thank You.
@@SwashbucklingwithCode I have some values from my Model (working with asp.net core and C#, no react, just cshtml pages) and I need those values to be send as a param into my function that is a part of a class. So I was thinking that I can have in my html and under that a new script like const dog = new Dog(); dog.bark('@Model.dogName'). But If I understand You correcltly I can instance my objest in js file and get the value I want by document.getElementById("dogName"); Is it the right way to do that? Sorry if I sound confused but module part is quite new for me. Once again, You really are doing a great job and thank Yopu for Ypur time and writing an example for me
@@MartaJohnsson Your english is great, but the tech you are using is not something I've touched in a very long time, and certainly not with JS modules or Webpack, and makes it more difficult to give a specific answer that works. Typically, HTML doesn't handle any logic from JavaScript, but JavaScript adds functionality to HTML through the DOM and its API. Modules can be ignored completely for the purposes of how to use JS features like classes and rendering to HTML. But if you are using JS Modules, you'll need something like a bundler (for example, Webpack) to bundle it all up into a single file (or sometimes multiple in more advanced situations). Browsers don't (until recently, so not much backward support) have a way to handle imports and exports for JS. In short: I can't say if it's the "right" way to do it depending on your templating language (cshtml pages), but handling all the logic in JS and grabbing the HTML elements you need to update is the standard way without extra tooling, yes.
Hi, I've problem with NPM, whenever I install a package, I get the following message: "up to date, audited 1 package in 3s". Any idea to help me solve the problem, I'm using NVM and using the node version 16.14.2. In fact, everything was working fine, until, I tried to execute npx webpack.
Hi, great video, very instructive. I'm a newbie with npm and webpack and I'm stucked with something that seems very easy to do. I've created a function that initializes a timeline (with parameters) inside the index.js and I'm trying to call it from the html code, but I don't know exactly how. I've tried using `export default initTimeline` but nothing works for me, do you have some idea/suggestion how to do it? Thanks in advance
For many Webpack project setups you'll be relying on the script being loaded in your `index.html` as the activator. The rest you would do from your `index.js` file or the other `.js` files it imports. Having the ability to call methods from the html is a different kind of setup, typically with a library, and can be complicated for someone that's newer to Webpack or bundling in general.
@@SwashbucklingwithCode but I need to pass the component ID where to load the timeline and the datasource, isn't any way to pass them? I've tried using global variables but seems that they work in different scopes
@@danielgil3825 There isn't enough information for me to make proper suggestions, but it seems like you want to run a script against something that is already in the DOM. If that is the case, you'd use `document.querySelector` to grap it in your script and run it on startup. Like I said, can't be sure, but it sounds like a lot of crossing the streams is happening here. If you want to put a repo up I'll take a look.
How to tackle the case when the library code we import is using features that aren't supported by our target browsers. Wouldn't we need to transpile `node_modules` in that case? Since it will be really hard to tell, wouldn't it make sense to transpile all the code we're importing from other libraries too?
Good question. This is why packages usually use babel in conjunction with bundlers to transpile their output. It's generally been frowned upon to make a package with with any modern features but as you can guess that is a moving target. Short answer is that you shouldn't be needing to transpile node_modules, and if you have an issue with that you'd look to see if they have an older version of the package since they might have dropped support for older browsers. I rarely run into this issue, personally, but I also stopped supporting all non-evergreen browsers a couple years back.
I should also add to this comment that it is a much more nuanced problem than many seem to realize, and I haven't found much general agreement in the community for the "correct" way when it comes down to the finer details of publishing a package for others to use. Everyone's work situation is different, but I often see people making their life more difficult by trying to adopt "newer" technology when they simply must support very legacy environments. There is usually some way to make things work, the question just becomes: "is it worth it?"
❗❗ IMPORTANT UPDATES ❗❗
### webpack-dev-server update
`webpack-dev-server` released version 4 on 2021-08-18, which has a breaking change for this video. In the `webpack.config.js` file, under `devServer`, the `contentBase` property has been changed to `static`. If you use `contentBase`, like I do in the video, you'll get an error. You can either use `webpack-dev-server` ^3.11.0 (which is what this video uses) and just follow along with the video, or you can install the latest and update to the required change.
Here is the link to the webpack docs for this property:
webpack.js.org/configuration/dev-server/#devserverstatic
And here is a link to the migration guide from v3 to v4:
github.com/webpack/webpack-dev-server/blob/master/migration-v4.md
### WINDOWS USERS
Some of the scripts I make to set environment variables will not work on Windows. I've made a video to fix that issue here:
ruclips.net/video/t9okUDkRUDc/видео.html
### Hot Reloading issues
Your issue might be different, but just in case -- If you are having troubles with hot reloading check out this video, also in the Webpack playlist on my channel, which shows a fix:
ruclips.net/video/lNkVndKCum8/видео.html
Thanks for the update.
put this instead
var path = require('path');
module.exports = {
...
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
}
}
for "build": "NODE_ENV=production webpack" error on build
install:
npm install -g win-node-env
@@reycoseguma2492 thank you so much :)
@@reycoseguma2492 or you could use `directory: "./dist"` without `path`
Jesus teaching me Webpack 5. What a time to be alive.
Haha 😂
This is so true.
true
actually made me laugh
Nooooooo… it’s CAT STEVENS
You deserve growth. I will share this video with all my friends and tell them to share it more. I'll always be thankful for your gatsby tutorial. Helped a lot.
That's very cool of you. I appreciate all the help I can get, and even better, I love hearing that the videos are helpful!
I'm hooked! I am a new subscriber!
1) You did NOT spend the first 7 to 10 minutes talking about yourself
2) You speak clearly and are relatable
3) Your points are not verbose but concise
Just Thank You
Thank you for the feedback, much appreciated.
GREAT Vid.... Straight to the points with examples and demonstration. I've watched many others on this full of BS that don't really understand what they are doing and just talk about it.
Thank you. I still feel like I hardly know what I'm talking about, but that never ends in this field.
totally agree. this video is way better than many other webpack videos that have much more views and likes
Glad I found this channel. No bs straight-to-the-point tutorials that cover many nuances that other tuts skip. Subscribed.
I'm happy to hear that. The balance of getting straight to code and giving some explanation has been challenging for me.
I think this is the most easiest video on webpack, by far the best one I've seen. Can't thank enough. I was struggling to understand webpack, babel with this video I was able to do it by myself. Thanks again.
Damn, I already was so angry with webpack because I felt like I would never get behind it and see its benefits. You explained the basics so neatly and simple that it all makes sense now. Thank you so much for this! You got my sub!
I can already see this channel getting big
These are the type of comments that motivate me to keep taking the time to create videos. Thank you for letting me know.
Really a gorgeous video And special thanks for the hint about 'static'
Thank you.
Great video. Learning webpack from scratch for work and I like how he takes you from zero to understanding the basics.
Nice. Ty for the feedback.
This guy makes me understand webpack in the deepest level. Keep up the good work bro!
probably not the "deepest" but I'm certainly pleased if it pulled back the veil a bit.
Many many thanks for explaining the topic with such clarity. I am grateful for your minimal approach to building a final result, rather than "let me show you how cool I am by demonstrating this very complex gibberish".
That's my goal, thank you very much for the feedback!
A very goo video. For those who are following along ("now") and having some issues with the dev server (webpack-dev-server), try to downgrade your version. Before I downgraded my version from 4.X to 3.X it wouldn't work.
The error message I got was:
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
Date: 2022/04
Thanks for the heads up for everyone. I put this issue in the pinned comment but unfortunately I can't annotate a video after it's up anymore (youtube changed that some time back)
Man, thank you so much for this video. You took the mystery and magic out of webpack, I can’t thank you enough!
Thanks for letting me know. Always nice to hear I got it right for some people.
This really helped break down the fundamentals of webpack. So helpful I've been looking for the answer and this was it!
Awesome to hear, thank you.
Great tutorial Jimmy. I've had to go back to the drawing board with my Webpack setup and this has cleared up a lot of confusion for me.
Very happy to hear that. Configs can indeed get wild over time.
I love how do you, stare, like "Today you will learn how easy it is came from the stone era to land on Mars"
Thanks Jimmy. This is excellent. I have been using Webpack but still learned important new things here.
That is awesome, thank you for letting me know.
This video was so helpful, I didn't wanna click on it because of the length, but I actually understood stuff and I'm glad I did, thanks!
Very good explanation, I was always struggling with webpack, but this entry gave me hope.
I'm excited to go through the whole playlist.
Awesome. Let me know how the playlist is once you've gone through it.
GREAT and CLEAR Explanation !! TOP! :)
looking forward for a React Typescript setup using Webpack 5 and Babel
Great straight to the point video. Actually clicked off of the freeCodeCamp video to here since he was barely talking about webpack 20 minutes into the video.
Amazingly explained, very practical approach and smoothly delivered. I am right now setting up webpack for my brand new React Typescript project. This is very helpful. All the best for your future works!
Thank you for the thoughtful message.
looked into documentation, looked other info sites and couldn't understand what that thing actually does. This video just have put everything on it's places. Thanks!
This deservers alot of attention !! Very well explained ! Thanks
Keep up the good work, You'll get there brother hang on!
Great video! You have a concise, but thorough presentation style. I also really appreciate your calmness, so many dev channels go a mile a minute which is frankly annoying.
I really appreciate you saying so, thank you. It's easy to feel like your own videos are getting too long and to want to speed through parts, so I am always happy to hear that someone appreciates the time spent on clarity.
The balance is really tough.
Thanks for your concern on updates that has breaking changes
The way this video proceeded, initially without webpack, then bare minimum requirement, and then incremental approach, itself shows how crystal clear the concepts of this guy are. Totally loved the video.keep up the good work. Subscribed!! 😍😍
Wow you are playing "John Wick as a Software Developer" Hehe. Thanks for awesome explanations I like the way you are coding and yes I was stuck in setting up webpack for a while now.. It was really helpful!
Thank you for the kind words.
Must understanding video I came across, thank you man!
Awesome, thank you.
Thank you this guidance. Webpack was always a bit of a struggle for me.
I think the majority of us have felt that way. Respect for taking the time to improve at it.
I have watched both your two videos on webpack and I'm extremely grateful for the great content you have put out there! Thanks mate!!!
Thank you for saying so, I am always happy to hear it. I actually have 4 videos now in the playlist (not counting the dev server bugfix).
D&D themed coding. Immediately subscribed. That's brilliant!
Haha, I think you are the first person to mention it. I'll have to step up the RPG vibes, I guess.
Very informative, thank you very much for your time and your effort. Excellent tutorial.
Awesome, thank you for letting me know.
Really helpful! Webpack / babel from gradle to grave.
finally a webpack video I can make sense of. This greatly helped my comprehension.
Better watch out Colt Steele, Swashbuckling with code is coming for you!
Happy to help. Best of fortune in your webdev adventures.
Thank you for step by step explanation. Great video.
Anytime, and thanks!
I loved it! you have the skill of teaching complicated subjects in a simple language.
finally someone shoing the SRC folder thing, i spent a whole day trying to fix it and tutorials dont show it, subscribed, these things are so complex, i thought not even jesus could help me
Thanks man, love your style of presentation.
this is exactly what i needed thank youuu
Glad to hear it!
I'm that type of guy that never comments on anything, just scrolls, but maaan... I must say, you've really impressed me, you have a gift for sharing knowledge, great content quality it would be a pleasure to see you grow. Ofc i've subbed and ringed the bell immediately. You are truly a knowledgeable man.
@Edit I've noticed you are using quite a few keybindings and tricks when dealing with the code, would love to see a video explaining how to setup vs code or what vs code tricks and tips are worth mentioning
Best Regards
Friend from Poland
Thank you, I truly appreciate the kind words, especially as a lurker myself. I hope to keep seeing you around as I improve, then. Take care!
@@SwashbucklingwithCode just started my first job as a React developer so will certainly hang around !
thanks man, hope to see more videos on web development :)
your chanel deserves to grow .. great video, helped a lot !
Thank you for the kind words. I will keep trying!
@@SwashbucklingwithCode could you be so kind sir and do part 2 and include setup with typescript + sass combination ?
@@matejbeber8892 Sure. I have a quick setup with JSX planned currently, but I could do some other variations.
First time I make webpack work fine and I understand what it does. The only problem I had was that I couldn't use "NODE_ENV=production" in the script, it returned "'node_env' is not recognized as an internal or external command" but I fixed it using --mode=production. Thanks a lot.
Sweet! I also linked to a video in the notifications for ways to handle `NODE_ENV` not recognized issues.
But I'm glad you figured it out.
Thank You for sharing. It is incredible. I follow and understand every word. I wish I did find You before I bought a bunch of courses that gave me exactly nothin but frustation. Thank You
It is quite the pick-me-up to hear this, thank you.
Also, sometimes those frustrating studies that seem to give nothing are a needed period for your brain to start loading up a subject until you find a clear source. Just my 2 cents and something I consider when being frustrated at no results.
@@SwashbucklingwithCode smart & humble 🎉
You saved my days.
Thank you
2:59 went down hour-long rabbit hole to figure out what witchcraft was used to have a "take" command mkdir and cd. Still not completely clear, but realized it wasn't really mission critical.
Yah, in hindsight I regret using that without a disclaimer. I have a video covering that and other commands here:
ruclips.net/video/Xpp8DW2eUUA/видео.html
@@SwashbucklingwithCode Old dog is not compatible with new tricks. I've spent most of the day trying to figure out how jquery and jquery plugins like jquery validate work with webpack. I came upon webpack looking to get away from grunt and gulp for minifying/uglifying js, compiling sass and minifying css. The more tools that are made to make life easier for developers, it seems that the workflow gets more and more complicated until it's the furthest thing from easier.
@@thebassuniversity Things have gotten pretty complex for many setups, and it's very intimidating when you don't work with them consistently. But when you take into account all the complications that browsers introduce to a language updating, it starts to become clear why the tools are so complex.
If you are looking for simplicity, Parcel is is pretty amazing and does a lot for you. I prefer Webpack for more complex stuff, but Parcel is great for many projects.
@@SwashbucklingwithCode My big issues isn't really the complication, it's the learning curve for the utility time. Seems like I'm changing workflows completely every couple of years, which can leave me with legacy projects over 3 different task runners/bundlers. Thankfully I did stumble upon the answer to my jquery issue. I can continue to use the jquery CDN with
externals: {
jquery: 'jQuery'
}
Now I can continue my test implementation.
@@SwashbucklingwithCode Zipping right along with webpack now. Your video helped get me in the right direction. The missing link for me was that, out-of-the-box, webpack bundles and minifies js. Once you specify things, you are undoing some default behavior. For instance, a custom entry point removes src as the default entry point, a custom minifier for css removes tercer for js. This seems obvious once you realize that these are not additive, but they replace, so you need to add the defaults back. To a new user, when everything was working automagically, it seemed like I broke something, so I was looking for fixes to things that weren't broken.
Thank you very much for posting this video. I found it really helpful.
Glad to hear it, thanks.
Hey, You're amazing. Just wanted to mention that
Why, thank you.
Whoa! Great stuff, thank you so much.
As you said in the beginning Angular or Vue.js make it easy to start developing web apps since they hide the complexity of tools like webpack. But after some time you will ask yourself, how the content of the dist folder is generated. This video uses the minimum setup to provide an answer to that question. Simply reproduce the steps shown and you will have a much better understanding of web apps. I am a professional web developer but I have to admit that I learned a lot from that video!
Awesome. Thanks for the extra perspective. I even learned some things making the series, which is always a nice bonus.
Very nice explained!
Thank you.
Thank you, You're breathtaking!
Haha, thank you.
Well explained, helped a lot!
Glad to be of service.
Hello! It`s a very good video, but I`ve a problem (13:27). There wasn`t any error in the webpack during compilation. But.. When I tried to open a Browzer (Firefox 93.0) - there was an error "Uncaught TypeError: e.getClasses is not a function". Here is my configuration: "devDependencies": {
"webpack": "^5.57.1",
"webpack-cli": "^4.8.0"
}
For modes you can also add a flag to your command, like "webpack --mode=development" :)
Thank ya. That's actually in the latest video clip that's linked in the card on this one.
@@SwashbucklingwithCode Oh, sorry bout that! I stopped at the Babel part as that was less relevant for me.
I love your teaching style buddy, just not a fan of most of the subjects currently present on your channel. Are you planning on doing any of these: Modern WordPress Development (with Roots.io stack), Laravel, PHP OOP, Docker, Laravel Mix, Vagrant, deploying to DigitalOcean?
@@tomdevisser8150 No need to apologize at all, I love when people leave tips for me and the rest of the viewers.
I was just mentioning it was there because I just put it up a few days ago.
@@tomdevisser8150 I am not planning on covering any of that besides Docker and maybe Digital Ocean at some point. I'm not into the PHP side of the world, sorry.
@@SwashbucklingwithCode Ah, that's too bad, thanks for letting me know though :)
at min 21:34, how did you see the view main.js:formatted. Mine wasnt giving that option even tho in console the path showed main.js:formatted... hmmm. any thoughts?
is this why i did not see all the extra code you referred to? I only got:
(() =>{
'use strict';
console.log('ran from index.js'),
console.log('gandalf'),
console.log('xena');
console.log({
a: 'alpha',
b: 'bravo',
c: 'charlie'
})
}) ();
using FF btw and get this warning when run npm run build:
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: webpack.js.org/configuration/mode/
seems won't go into development mode. tried many ways to do so with no luck. suggestions greatly appreciated.
ok, anyone else getting the above warning, I found a fix:
in the terminal: (pass as a CLI argument)
webpack --mode=development
NOTE: the above must be run every time you want to see in development mode (reverts back to production mode after a 'npm run build')
with this, it doesnt need the devtool: 'sourcemap' in the webpack.config.js file in order to map the sources! :) (with or without devtool: 'sourcemap' NO main.js.map gets created...)
if anyone figures out how to make dev mode work without having to running 'webpack --mode=development' everytime you need it... would love to hear it!
Thank you so much. I like your channel, immediately subscribed 🔔 , and like 👍👏❤
I appreciate it. Best of fortune in your future swashbuckling.
I always thought of webpack as a "compiler" for web development.
30:55 why do you need to require('path') but not __dirname, if they both "come with node"
It's a good question. "__dirname" is a global variable available when running scripts, and "path" is is a module with utilities, and modules need to be imported. This is made more confusing, to me at least, by the fact that running "node" in your terminal and trying to log "__dirname" will be undefined, since it isn't actually a script you are running, but "path" will be available.
This is just one of those everyday node things you get used to, but don't let that stop you from investigating more if you are really curious.
@@SwashbucklingwithCode I agree, that does make it more confusing. Also realised I probably don't know what a script is, in this regard. more investigation to follow!
Very good explanation. Thanks for the video :)
Delightful! Glad it could help.
Love this video! Very Helpful!!
Awesome!
Thank you for the greatest video for the newbie! I did not understand one thing though: You manually copied index.html to ./dist folder, but you never mentioned index.html when working with ./public folder. Apparently it must have worked, but how did index.html get there (within the bundle file?), and if not, from where was it served? And how it is supposed to be served? I am working on Typescript Aurelia project now, and while all the resulting .js files are copied to the ./dist folder, .html files are not, and nothing works obviously.
Dude you explain very clear and succinctly. Gained a new sub from me. Looking forward to watching more of your videos
When I get to 28:09 I get 404 failed to load resource(Not Found) main.js:1. All files are the same as yours, did something change in the last year?
very good work , i"ve started with the official webpack documentation ( since it's good practice ) and it was a little confusing because they explain every detail. a simplified explanation like this may be good start to dive deep in the docs later.
ps: i've noticed that you're using oh my zsh with the vim ext for vscode! would you please make a video about tips, enhancing productivity and best configs ?
nice work again thks!!!
Glad it worked for ya. For oh-my-zsh and general terminal tricks I have a short video on the channel ruclips.net/video/Xpp8DW2eUUA/видео.html
It's a good suggestion overall, I'll have to think of a digestible format for Vim+VSCode. Thanks.
Thanks for the knowledge.
Please you can zoom your text editor a little bit so that those of watching with small screen phone can follow along as you type out the codes.
I have to switch to my laptop to be able to follow.
Thanks so much.
I'll definitely look into it and consider it more in the future. Right now it already is zoomed in about 300% of my norm and the balance between code real-estate and readability is tough.
If you have multiple examples of other channels that do this well I'd love to take a look, as I actually see most other channels having similar or smaller zoom than mine.
@@SwashbucklingwithCode thanks for your kind response
@Swashbuckling with Code i have been issues trying to get this through the documentation, your tutorial is on points, thanks man, now I can move on.
The docs were pretty tough for me in areas as well, thus the video. I'm glad it fulfilled it's purpose.
Your videos are amazing, its swashbuckling amazing, thank ye cap’n 🌎💯
Thank you, and you're welcome.
Holy crap, I'm learning Webpack from Jared Leto
Points for a new one to my ears.
Awesome video!
So at 14:15 in your tutorial, I followed you down to the letter and my console is throwing me an error saying " (0 , e.getClasses) is not a function" why is that occurring?
Nevermind i figured it out. I removed the "default" keyword and the error cleared
Thanks for this really helpful and informative video🔥
Btw you look a lot like Christian bale
Well that is a first, it's usually Keanu or Jesus.
love the quality
You are a life saver, thanks for this video!
Glad it was useful.
u a doing my day, ty!
very helpful, thanks!
Sweet! Thanks for letting me know.
Thanks for the video! I'm a fan of the style of explanation. You've got yourself a new subscriber and I've shared the video.
I also dig your simple terminal setup. I browsed your blog in the hopes I'll see a walkthrough of how you set it up, but it's not there. What did you use? I especially like the way the command you write turns from red to green (guessing it happens when it finds a valid one?)
Also, happy new year! 🥳
Thank you, kindly. I'm in the process of re-working my blog and I plan to have a post about all my settings.
For now, I'm using .zsh with these 2 lines in my .zshrc file
source ~/.config/git-prompt.zsh
PROMPT='%F{cyan}%~%f $(gitprompt) %(?.%F{green}$%f.%F{red}$%f) '
The `git-prompt.zsh` can be found here:
github.com/git/git/blob/master/contrib/completion/git-prompt.sh
Nicely done, dude!
Thank you!
Small question:
Let's say you have your ESnext code split into different files, and you want some ES5 code running in your browser.
Babel will take care of transpiling ESNext to ES5
And webpack will bundle it up together so the browser can gobble it
But what's the order of operations? Does the code get bundled and then transpiled, or does it get transpiled and then bundled?
I have never checked, myself. I'd guess bundled first, otherwise it seems like it would inefficiently transpile the same imports many times, even when it only uses it once in the end.
What makes you ask, just curiosity or something else?
Hey Swashbuckling,
You just made my day :-). Now a subs.
Happy to help.
MAN you look like Keanu Reeves. I can't wait to see you in next John Wick😍.
Lets circle back to the webpack again audience.👻
Great video, thank you!
Thanks for the video it is really helpful.
And I have a question if someone could answer it:
Why do we need to execute 'npm run build' and when running dev server we can execute it with 'npm start' without the 'run' (it works with run as 'npm run start' as well).
'npm build' does not seem to work without the 'run'.
Thanks again!
`npm start` and `npm test` are two commands that are common enough to have a shorthand built into node. I don't know why, but that's how it's been for a long time.
every other command is "custom" and needs `npm run` in front of it.
@@SwashbucklingwithCode Good to know, thanks! :)
could you please make a video on configuring a webpack for angular😊
40:30 Yes!!! video now called "How to get polyfills with Babel 7 and Webpack" ?
also very keen on the React video you were talking about!!! subscribed :)
Yup, that's the one. And I'll probably be covering React/JSX in webpack in a full Webpack project video to round the series off.
@@SwashbucklingwithCode cheers, great stuff!
@@SwashbucklingwithCode When can I come back for that! Any hard(soft will work too ; ) ) deadline!?
@@ksorv Hoping to have that one done a week from next Monday, since I just finished Monday's video.
this was great, thanks!
No problem, thanks for the feedback!
This video is simply amazing 😍
Thanks man! Appreciated!
Great video!
I just have one question about import/export. What if I would like to export a whole class and want be able to create a new instance of thar object and somehow mke the object accesible in my html file or instace the object there? Is it possible? If so, do You have any advice how to do that?
Thank You in advance!
If I'm understanding the question correctly:
Any javascript that you want to be "accessible in html" is really just html events calling functions/properties in an already loaded script.
So, you certainly can export a class and import it + instantiate, but to try it out in html I'd start with a class in a single file and hook up a button or something to call the function that creates a class instance.
That was difficult to put into words, haha. I don't have a video around this topic, but it is somewhat normal webdev flow but there are some layers to understand first. Particularly, you need "state" of some sort to keep track of the instance.
Apologies if I made too many assumptions off that question.
I whipped up a gist you can try out if I'm on the right track of understanding the question:
gist.github.com/Jimmydalecleveland/c5702562b87efa9f7943848886ae0c52
@@SwashbucklingwithCode I know my question is kaotic, english is not my first language and I'm very thankfull that You are really trying to help. I will try to write it down and explain better. Thank You.
@@SwashbucklingwithCode I have some values from my Model (working with asp.net core and C#, no react, just cshtml pages) and I need those values to be send as a param into my function that is a part of a class. So I was thinking that I can have in my html and under that a new script like const dog = new Dog(); dog.bark('@Model.dogName'). But If I understand You correcltly I can instance my objest in js file and get the value I want by document.getElementById("dogName");
Is it the right way to do that?
Sorry if I sound confused but module part is quite new for me.
Once again, You really are doing a great job and thank Yopu for Ypur time and writing an example for me
@@MartaJohnsson Your english is great, but the tech you are using is not something I've touched in a very long time, and certainly not with JS modules or Webpack, and makes it more difficult to give a specific answer that works.
Typically, HTML doesn't handle any logic from JavaScript, but JavaScript adds functionality to HTML through the DOM and its API.
Modules can be ignored completely for the purposes of how to use JS features like classes and rendering to HTML.
But if you are using JS Modules, you'll need something like a bundler (for example, Webpack) to bundle it all up into a single file (or sometimes multiple in more advanced situations).
Browsers don't (until recently, so not much backward support) have a way to handle imports and exports for JS.
In short: I can't say if it's the "right" way to do it depending on your templating language (cshtml pages), but handling all the logic in JS and grabbing the HTML elements you need to update is the standard way without extra tooling, yes.
I watched this vid, then my hand just click subscribe
Thank you so much!
Awesome mate, thanks 🙏
Hi, I've problem with NPM, whenever I install a package, I get the following message: "up to date, audited 1 package in 3s". Any idea to help me solve the problem, I'm using NVM and using the node version 16.14.2. In fact, everything was working fine, until, I tried to execute npx webpack.
Great tutorial! I'm wondering - what theme are you using for vscode?
When you installed the babel stuff should it have been for dev only? (-D)
Yes, great point, that's a big goof by me.
Hi, great video, very instructive. I'm a newbie with npm and webpack and I'm stucked with something that seems very easy to do. I've created a function that initializes a timeline (with parameters) inside the index.js and I'm trying to call it from the html code, but I don't know exactly how. I've tried using `export default initTimeline` but nothing works for me, do you have some idea/suggestion how to do it? Thanks in advance
For many Webpack project setups you'll be relying on the script being loaded in your `index.html` as the activator.
The rest you would do from your `index.js` file or the other `.js` files it imports.
Having the ability to call methods from the html is a different kind of setup, typically with a library, and can be complicated for someone that's newer to Webpack or bundling in general.
@@SwashbucklingwithCode but I need to pass the component ID where to load the timeline and the datasource, isn't any way to pass them? I've tried using global variables but seems that they work in different scopes
@@danielgil3825 There isn't enough information for me to make proper suggestions, but it seems like you want to run a script against something that is already in the DOM. If that is the case, you'd use `document.querySelector` to grap it in your script and run it on startup.
Like I said, can't be sure, but it sounds like a lot of crossing the streams is happening here. If you want to put a repo up I'll take a look.
How to tackle the case when the library code we import is using features that aren't supported by our target browsers. Wouldn't we need to transpile `node_modules` in that case? Since it will be really hard to tell, wouldn't it make sense to transpile all the code we're importing from other libraries too?
Good question. This is why packages usually use babel in conjunction with bundlers to transpile their output. It's generally been frowned upon to make a package with with any modern features but as you can guess that is a moving target.
Short answer is that you shouldn't be needing to transpile node_modules, and if you have an issue with that you'd look to see if they have an older version of the package since they might have dropped support for older browsers.
I rarely run into this issue, personally, but I also stopped supporting all non-evergreen browsers a couple years back.
I should also add to this comment that it is a much more nuanced problem than many seem to realize, and I haven't found much general agreement in the community for the "correct" way when it comes down to the finer details of publishing a package for others to use.
Everyone's work situation is different, but I often see people making their life more difficult by trying to adopt "newer" technology when they simply must support very legacy environments.
There is usually some way to make things work, the question just becomes: "is it worth it?"