❗❗ 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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lNkVndKCum8.html
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.
out of all the tutorials i viewed, this was the one that got me up and running with webpack AT ALL. tysm! know just when to explain and how to explain it, dude!!
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 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
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.
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.
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
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!
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.
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!
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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.
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 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
Source maps didn't work for me in Chrome, but they work fine in Firefox. Took me a while to sort that out, maybe it helps someone... Or does anyone has a solution for Chrome?
@@SwashbucklingwithCode Unfortunately it doesn't take me to the original file (in Chrome)... it doesn't even show the filenames getClasses.js/index.js but only the unresolved main.js Firefox on the other hand resolves main.js to the appropriate JS filename - and when clicking it I get the expected original file. Strangely enough in Brave Browser it works, even tough it has apparently the same dev-tools as Chrome; Firefox dev-Tools look somewhat different. Basically I have the same problem as you had @24:51 where just main.js is shown, but after a few seconds for you it started to work. Never mind, maybe a local problem. Thanks for your great tutorials. They really, really help!
@@SwashbucklingwithCode Solution: Source maps should work in Chrome if you check the "Enable JavaScript source maps" under Sources in Chrome DevTools preferences. I found that worked for me. Thanks!
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
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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Xpp8DW2eUUA.html It's a good suggestion overall, I'll have to think of a digestible format for Vim+VSCode. Thanks.
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" }
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.
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.
Easy? this is webpack... webpack cannot be 1: fast, 2:easy. That's why all guys end up using "create-crap-script" scripts. Even Facebook's React has one.
How to maintain subfolder structure for images... I'm using like below but its getting from src folder { test: /.*\.(gif|png|jpe?g|svg)$/i, type: 'asset/resource', generator: { filename: '[path][name].[ext]?[hash]', }, }, src --globalassets --home --banners --footer --partners --news I getting like this. I don't want the src folder
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!
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.
getting [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration has an unknown property 'modue'. These properties are valid:
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.
@@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!
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?
Great tutorial! One thing: after I added "--watch" ("build": "webpack --watch") to package.json, when I make a change and save a file I see an update in command prompt. However, nothing changes in Chrome JavaScript console - to see the change I have to save again - any one else getting this behaviour (and any fixes)? I'm on Windows 10.
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!
I for the life of me could not get the hot reloading to work under a dockerized container. I use Lando to spin up docker instances for WordPress development. I just couldn't get the right combination of a lando yml and webpack config file to work :( Hoping you might have some experience with something like this?
I've done it with other frameworks in the past but I don't even try to do anything hot-reloading in docker environments anymore. It's always been too slow so I just run the project natively if it's frontend based. Sorry I don't have a solution for ya, but perhaps someone else will.
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
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?
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".
I'm assuming this is for React, Vue, or another framework that does work with the DOM. I don't have experience doing this custom with webpack, I leave it to frameworks like Gatsby or Next.js to handle SSR.
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!
