❗❗ 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: ua-cam.com/video/t9okUDkRUDc/v-deo.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: ua-cam.com/video/lNkVndKCum8/v-deo.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
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)
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.
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".
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.
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
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 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.
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!
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!
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!! 😍😍
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.
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
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: ua-cam.com/video/Xpp8DW2eUUA/v-deo.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 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.
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.
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!
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!
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!
@@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.
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?
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" }
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?
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 ua-cam.com/video/Xpp8DW2eUUA/v-deo.html It's a good suggestion overall, I'll have to think of a digestible format for Vim+VSCode. Thanks.
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.
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.
Hi Mate, Im just curious how you learn this stuff, I know im not a beginner anymore but I want to know how you tackle things to learn the best out of it. Hope you will answer
That's a difficult question to answer, let alone answer succinctly enough for a youtube comment. I suppose it's a combination of reading the docs, using the tool for enough time to have basic familiarity with it, and then trying to find the most minimal example I can wrap my head around. I don't do this with everything I use, of course, but after using something that is too "magical" for me for long enough I'll decide that a time investment will be worth it in the long run. For Webpack, as an example, I went through the docs again for setting up a new project (in case things have changed at all) and then I sort of surgically remove parts of the configuration and code to see how it breaks and what my output is. Then I just added complexity in code input or configuration and checked the results each time, trying to understand as much as I can. Sometimes it can really melt your brain so frequent breaks are a must.
@@SwashbucklingwithCode I really appreciate you answering my question, and I think we all do whatever it takes to learn something we want. It just really amaze me how well you explain it to us that it makes me think that you learn it pretty well than others like me. Sometimes reading docs overwhelm me because I dont know where to start, but having you teach us what we really need to know , makes our life easier .. I hope learning is that easier where every parts you need will be provided like this, but it is what it is. I think learning through the hard way is the best thing to make out of it
@@gian5138 Good points, and you are welcome. I'm certainly not of the opinion that reading the docs is often easy, it really depends on how well made they are. I've found the Webpack docs to have a lot of the info I need, but not in the way that I need it. Like little bits sprinkled here, rather than exact patterns for scenarios. They'll often leave out just enough to be frustrating. That's where videos are nice, as it's unlikely they'll skip over any code to get to a complete product.
@@SwashbucklingwithCode just one last question, cause I want to add a autoprefixer or postcss to have a vendor prefix in my create-react-app application and im using sass, I just wondering if this will work or it has other way to implement it ? Thank you as always
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.
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.
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.
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
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?"
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
❗❗ 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:
ua-cam.com/video/t9okUDkRUDc/v-deo.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:
ua-cam.com/video/lNkVndKCum8/v-deo.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.
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)
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.
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!
I love how do you, stare, like "Today you will learn how easy it is came from the stone era to land on Mars"
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.
Really a gorgeous video And special thanks for the hint about 'static'
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.
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
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.
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.
GREAT and CLEAR Explanation !! TOP! :)
looking forward for a React Typescript setup using Webpack 5 and Babel
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!
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.
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 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.
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 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.
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.
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.
Thanks for your concern on updates that has breaking changes
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.
Keep up the good work, You'll get there brother hang on!
Really helpful! Webpack / babel from gradle to grave.
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.
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!! 😍😍
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.
This deservers alot of attention !! Very well explained ! 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.
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.
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
Must understanding video I came across, thank you man!
Awesome, 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:
ua-cam.com/video/Xpp8DW2eUUA/v-deo.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.
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.
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).
Very informative, thank you very much for your time and your effort. Excellent tutorial.
Awesome, thank you for letting me know.
Thanks man, love your style of presentation.
I loved it! you have the skill of teaching complicated subjects in a simple language.
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 🎉
thanks man, hope to see more videos on web development :)
Thank you for step by step explanation. Great video.
Anytime, and thanks!
Whoa! Great stuff, thank you so much.
Thank you very much for posting this video. I found it really helpful.
Glad to hear it, thanks.
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 !
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.
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!
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.
Hey, You're amazing. Just wanted to mention that
Why, thank you.
Very nice explained!
Thank you.
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.
very helpful, thanks!
Sweet! Thanks for letting me know.
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!
You saved my days.
Thank you
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 :)
this is exactly what i needed thank youuu
Glad to hear it!
Thank you, You're breathtaking!
Haha, thank you.
Very good explanation. Thanks for the video :)
Delightful! Glad it could help.
@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.
Well explained, helped a lot!
Glad to be of service.
Dude you explain very clear and succinctly. Gained a new sub from me. Looking forward to watching more of your videos
Holy crap, I'm learning Webpack from Jared Leto
Points for a new one to my ears.
Thank you so much. I like your channel, immediately subscribed 🔔 , and like 👍👏❤
I appreciate it. Best of fortune in your future swashbuckling.
Thank you so much!
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?
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"
}
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
I always thought of webpack as a "compiler" for web development.
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 ua-cam.com/video/Xpp8DW2eUUA/v-deo.html
It's a good suggestion overall, I'll have to think of a digestible format for Vim+VSCode. Thanks.
Love this video! Very Helpful!!
Awesome!
Awesome video!
Great video, thank you!
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?
Awesome mate, thanks 🙏
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.
Your videos are amazing, its swashbuckling amazing, thank ye cap’n 🌎💯
Thank you, and you're welcome.
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.👻
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.
I watched this vid, then my hand just click subscribe
Hey Swashbuckling,
You just made my day :-). Now a subs.
Happy to help.
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.
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
love the quality
Great tutorial! I'm wondering - what theme are you using for vscode?
Hi Mate, Im just curious how you learn this stuff, I know im not a beginner anymore but I want to know how you tackle things to learn the best out of it. Hope you will answer
That's a difficult question to answer, let alone answer succinctly enough for a youtube comment.
I suppose it's a combination of reading the docs, using the tool for enough time to have basic familiarity with it, and then trying to find the most minimal example I can wrap my head around.
I don't do this with everything I use, of course, but after using something that is too "magical" for me for long enough I'll decide that a time investment will be worth it in the long run.
For Webpack, as an example, I went through the docs again for setting up a new project (in case things have changed at all) and then I sort of surgically remove parts of the configuration and code to see how it breaks and what my output is.
Then I just added complexity in code input or configuration and checked the results each time, trying to understand as much as I can.
Sometimes it can really melt your brain so frequent breaks are a must.
@@SwashbucklingwithCode I really appreciate you answering my question, and I think we all do whatever it takes to learn something we want. It just really amaze me how well you explain it to us that it makes me think that you learn it pretty well than others like me. Sometimes reading docs overwhelm me because I dont know where to start, but having you teach us what we really need to know , makes our life easier ..
I hope learning is that easier where every parts you need will be provided like this, but it is what it is. I think learning through the hard way is the best thing to make out of it
@@gian5138 Good points, and you are welcome. I'm certainly not of the opinion that reading the docs is often easy, it really depends on how well made they are.
I've found the Webpack docs to have a lot of the info I need, but not in the way that I need it. Like little bits sprinkled here, rather than exact patterns for scenarios. They'll often leave out just enough to be frustrating.
That's where videos are nice, as it's unlikely they'll skip over any code to get to a complete product.
@@SwashbucklingwithCode just one last question, cause I want to add a autoprefixer or postcss to have a vendor prefix in my create-react-app application and im using sass, I just wondering if this will work or it has other way to implement it ? Thank you as always
@@gian5138 Autoprefixer through postcss is covered in my Webpack CSS video, if that's what you are after.
Thanks man! Appreciated!
You are a life saver, thanks for this video!
Glad it was useful.
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.
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! :)
thank you!
You are welcome, glad it was helpful.
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.
this was great, thanks!
No problem, thanks for the feedback!
Nicely done, dude!
Thank you!
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
u a doing my day, ty!
Hi, can you show your list of vscode extensions?)
Thanks for video)
I've had a couple requests for this so I'll probably do a few videos on some extensions I like in the near future.
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?"