Webpack Crash Course
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- In this video we will look at the Webpack module bundler which is used for many different tasks. Ill show you how to install webpack using npm and how to import both files and modules. We will also look at application structure and loaders such as style and Babel
CODE: Code for this video
github.com/bra...
EDUONIX COURSES: Please use affiliate links from website below
www.traversymed...
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
www.paypal.me/t...
/ traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy
Traversy Media, the best tutorial bundler.
Thank you for this tutorial Brad!
Now that webpack is at version 4.0. An extension to what Jon Wood mentiond
1) npm install --save-dev webpack webpack-cli
2) In version 4..0 there is no need to specify the bundle output file, so
a) If you are running from command line/terminal run
./node_modules/webpack/bin/webpack.js app.js --mode development
b) If you are running this using npm then the package.json can be changed to
"build": "webpack app.js --mode development"
and then npm run build
** If you want to specify the output you can use the --output. For e.g. webpack app.js --output app.bundle.js--mode development
Either one of the above approach will create a main.js file in dist folder so you will have to change the index.html to point to dist/main.js instead of app.bundle.js
thanks King!
Great Tutorial! Just a couple notes as some of this is out of date (an inevitable fact when creating any js tech tuts now a days).
*1.)* Some might need to install webpack and webpack-cli locally
*npm install --save-dev webpack webpack-cli*
or at least I did. The global instance didn't work for me.
*2.)* When you get to moving your style/css loaders into the webpack config, the syntax has changed since the tutorial was made:
_module.exports_ = {
entry: './app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
*rules: [*
*{*
*test: /\.css$/,*
*use: [*
*{ loader: "style-loader" },*
*{ loader: "css-loader" }*
*]*
*}*
*]*
}
}
Thank you! I was experiencing the same issues!
This video definitely needs a 2019 update.
I also installed webpack locally. In order for it to bundle I had to enter something like this:
*node_modules/.bin/webpack src/index.js*
So all you have to select is the original JS. The bundled JS will automatically be saved to the dist folder.
I followed the code above in my webpack.conf and I get this error when running npm run build:
ERROR in ./src/js/app.js
Module not found: Error: Can't resolve './people.js/index.js' in 'C:\Users\torre\Desktop\Misc Projects\webpack_app\src\js'
@ ./src/js/app.js 2:13-44
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack_app@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack_app@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\torre\AppData\Roaming
pm-cache\_logs\2019-04-12T17_20_27_456Z-debug.log
I also changed my package.json:
"build": "webpack"
I changed my index.html
Any ideas why?
Thanks a lot
Thank you Jon!
Great tutorial!
In linux you can jump to the beginning of a command line just by Ctrl+a , to the end: Ctrl+e. You can also do many other useful things like cutting the tail out ( from cursor) ( Ctrl+k ) , cutting the head out ( Ctrl+u), cutting just a word before cursor ( Ctrl+w ) , appending the last command line word/argument to the new command line ( Alt+. ) , or just discarding whole line ( Ctrl+c ) .
Doing this in 2019 make sure you run:
webpack --mode=development app.js -o bundle.js
big thank you
Thanks it worked
When I run this it seems to work but I got a folder called bundle.js with a main.js file inside and none of the fluff above the alert line inside the main.js file. Is this correct? Having a folder called bundle.js seems wrong to me...Thank you
this tutorial is pure gold.
I get more content in a half an hour than a whole year on my school LOL
Thank you so much for such a good explanation and regards from Spain
Great video. (Note: for those that may not know). You are using Atom editor. It has a package you can install for a live-server. No need to install Webpack-dev-server. You can also open multi-terminals(command-line) in the editor eliminating the need to have multiple terminal windows open. Just swtich to terminal you want, it save a lot of real-estate and time. You're tutorials are great!
My favorite knowledge dealer
your content is literally the best in all aspects ! As watching your videos i sometimes get lost and confused because of the overwhelming amount of info , i would appreciate it if you could do a video about possible web stacks and the approche we can have to learn it ,like where to start and what to learn next or the prerequisite to be able to build complete projects ! in most cases i find myself stuck in a situation where i need to stop and learn something new which i never knew i'd need it then get back to what i was doing which i guess isn't that great !
+thaifa I had the same issue when i started last year. best way is too google all sticking points and not expect one person as a be all end all guide because that's not possible. (either it will end up being too basic or a bit advanced).
for eg. if you need to just run a task runner like transform scss to css or minify some files you can use a task runner like Gulp. On the other hand if you have several libraries, modules and files and you need to bundle all of them together - webpack is the choice (webpack offers tree shaking features meaning if you have big libraries and you just use one function it removes all unused functions (shakes them off) from the final distribution file, so makes it more efficient.
Excellent tutorial for absolute beginners with webpack. I have struggled to figure out where to begin with webpack since it has such a wide array of feature. This tutorial was perfect. Your approach of starting with the most basic code and building from there is awesome. Thank you for such a great tutorial!
gee, this was so clear and comprehensive, we build an entire freaking webpack build in, like, half an hour. Brad, thank you so much
honestly this is the best tutorial for webpack. I've always been working with creat-react-app and had not known anything about webpack. Now I got the core knowledge in less than 40 minutes and not even a minute is wasted in this video. thanks!
They said what it's hard to learn from webpack it's the configuration and you show the guts of what webpack is and what are the keypoints by looking at other boilerplates that already have webpack and a bunch of pluigins and loaders on it it can change a lot but following the keypoints like you did it gave an idea of where to start digging when reaching a new unkown webpack config. thanks sir!!!
You have helped me for going back to the basics of how this works since webpack got very complicated with the newest version. Thanks a lot!
Thanks a lot for putting time here.
Dude thank you so much, this was a great overview even 4 years later! It's so helpful to know the core basics instead of just copy pasting stuff and trying to make it work
I will have to say you did an excellent job explaining this. I am now able to use it. I subd and belld as a learner. You teach well like Amir, Andrew Mead, Arian Hadjin and codevolution.
"Just for s**ts and giggles"
I don't know why, but that made me laugh. Guess I wasn't expecting it. Awesome tut, btw, Brad. Thanks, man.
Thanks a lot for this tutorial, after searching so many tutorials I found this is the best to make understanding the basics perfectly. Now I am more excited to build more robust webpack project where I would like to see all my html files, templates, sass, prod and dev environment setting.
I watched a few groups of tutorials urs is the best, very organized and from the bottom to the top, part and part are very cohesive~even ur fonts look bigger..big thumb~
Thank you! This is exactly what I need.
Thank you so much for this Webpack Tutorial. It is so much easier than including every single JS file in HTML, and those Loaders are very powerful tools.
This is the best webpack tutorial I've come across. Thanks for making this video!
Wow! I thought webpack would be harder to learn! You make it easy for me.Thanks a lot.
Thank you. Great tutorial. Helped a lot to understand what webpack is and why we need it. Thanks again
Dev Server was my favourite thing I've learned in this course. It is so useful when project updates itself in real time. Thank you for this tutorial =))
The best video on webapack on youtube .Thanks buddy
Great tutorial. Got me working with Webpack within half an hour. Simply Wow!!!
Just what I needed.
Since webpack has a specific package for command line you have to download webpack-cli from npm to use it there. Also make sure to set "scripts": { "build": "webpack-cli" } if you end up going that route.
Thanks a lot for this. I'm learning about React and trying to understand the individual structures.
webpack app.js -o bundle.js
worked for me
Thank you very much for adding this quick fix!!!
webpack -p app.js -o bundle.js will get rid of the warning as well
Yours one of the finest channels I've come across. I'm hooked to your videos and am really inspired by your contribution to the world of web. Talk about getting up and running, traversy media subscribe button is the way to go !
You are awesome cant stop watching your tutorials they are actually amazing
Thanks :)
Simple clear. Learned a lot from just few minutes of videos.
Hi there! I really enjoy your videos.. they are informative, formal & straight to the concepts! I learn & lookup for motivation & to stay abreast to the elite guys like you and some others ! I take an oath to payback to the community and support the best people like you and I'll become one of your Patreons.. thanks!!
ya, totally agree,
Traversy Media => the best tutorial bundler.
Nice Brad, webpack gets pretty deep on the optimizations too, how about a video on that aspect of Webpack?
Such an awesome tutorial man. There is really no way to thank you for such quality content. As soon as my broke a$$ is able, Ill try to support you on patreon or buy one of your full courses.
This video actually really helped me understand the basics of webpack, thanks so much!
Where has this video been! This video helps. Thank you, Brad.
Watching at the end of 2019 because Brad is amazing and overview is always good from Brad. Best author 2019 shld be Traversy Media!
You are the best on TH-cam
Wow, quite a compliment, thank you :)
Brad is a legend.
Gr8 content and delivery. Something that got me stuck was some errors with the config file. Module property doesnt have loaders anymore. had to use rules.use, as below
,
module:{
rules:[
{test: /\.css$/, use:[{ loader: 'style-loader' }, { loader: 'css-loader' }] }
]
}
thanks Elester
hello from oct 2018
if you want to add bundle.js to root directory of your project add this to webpack.config.js:
const path = require('path');
module.exports = {
entry: './app.js',
output: {
filename: './bundle.js',
path: path.resolve("./")
}
}
and don't forget to: npm install --save-dev webpack-cli (or install globally, no matter)
Hi Brad, you can put a text note in the video of the Vue.js crash course from December, referring to this crash course as webpack was used there prior to this course. Thanks for your videos once again.
In case anyone else gets an ERROR in multi error. Make sure you put a "--output" before bundle.js. The full command should look like this "webpack app.js --output bundle.js"
stackoverflow.com/questions/49006389/webpack-error-in-multi-src-index-js-dist-bundle-js
Nice crash course. 😃
You could have included what problems do we face if we do not use it.
How have I not watched this yet!? Well I may be a little late on this one but great video Brad!
I didn’t know about this tool. Very useful tutorial Brad. Thank you so much!
if you're still getting errors, try webpack-cli globally:
npm uninstall -g webpack
npm install -g webpack-cli
npm init
webpack-cli init
^to create config file
then create *./src* and file *index.js* (webpack searches for src/index.js. if the file does not exist you might get an error)
and finally run:
webpack-cli
Now that's how you explain Webpack..!! Thank you..!!
Incredibly useful. Thanks for sharing your knowledge!
Great course. You've explained everything very well.
As always - to the point!
That was great. At least I understand what webpack is doing now. Thank You!
Good tutorial! I would like to see a scenario where you concat two bundle files together that came from different custom modules.
Excellent tutorial on the subject. Thank you.
The best webpack tutorial ever!.
Thank you
Thank you, that's very informative to start with webpack!
Great video, exactly what I needed! I also use Atom editor.
to be honest, It is well explained.
Brad, your content is always great. Thanks
Thanks a lot, you are so clear explaining those concepts!!
Great OS choice man! I think we can hope more tutorials on Linux.
Thank you! Excellent crash course!
always my favorite teacher :) :):) ......
It is clear and well-explained! Thanks!
I just realised I wasn't subscribed yet. I'm sorry for that, I fixed it now.
Your tutorials are the best!!!!
i love jshint, it saves me a lot of time
Bravo, Brad, you are gret. I love your crashs courses. @Jon Wood, thanks for the updates. What's also new is babel-loader: `npm install -D babel-loader @babel/core @babel/preset-env webpack` and in webpack.config goes:
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
Here is the documentation: webpack.js.org/loaders/babel-loader/
cheers!
Excellent tutorial as well as all of the others!
Excellent presentation !!
Great video! Thanks!
wooooooww
amazing channel, amazing teacher, amazing videos
To continue on what Jon Wood said, webpack seems to have changed quite a bit from install steps since video. First, webpack advises things be installed locally with --save-dev flag (not globally with -g), and the install command of "npm install --save-dev webpack webpack-cli" is proper. Webpack needs webpack-cli to be ran from terminal. Webpack documentation on setup is here -> webpack.js.org/guides/getting-started/#using-a-configuration.
I couldn't get this to work without using a configuration file. I did webpack stuff at beginning of year in another tutorial, now was a refresher, but the other project also had a configuration file...and it was pretty hefty for smaller project. Webpack says you don't need one to get started, but its probably a good idea to just go ahead at beginning (especially if that's the only way to make it work lol). So, good luck everyone. Here's to fewer headaches. Great tutorial otherwise.
Thanks you so much for creating this tutorial!
This was awesome! So clear thanks!
Fantastic...Thank you so much for this.
Hello again, Brad! Please, make a video about webpack *-loaders (file, url, css, style, svg-url and so on). Can't find a good apprehensible guide. Thank you!
Well done - great primer!
Thank you, you are the best!!!!!!!!!!!!!!!!!!!!
Did anyone else get this issue when running webpack for the first time?
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
Because start from version 4+, the CLI is move to a package called webpack-cli, just "npm install --save-dev webpack-cli", this should solve the problem.
this is because the webpack version in this video is a year old, followed the documentation instead webpack.js.org/guides/installation/
Chung, I tried that and still got the exact same message.
Carlos, I'm still getting the same error message after going through all the installation steps from that link.
I just gave up and went back to using the same version used in this video. Basically when you go and install webpack use this command npm install --save-dev webpack@2.2.0-rc.0
thank you. I now understand it better
thanks for this wonderful tutorial
Thank you! This is super awesome tutorial.
Great Tutorial
Great tutorial! I learned a ton and then went off to learn some more! Thank you Brad! Note to anyone forking Brad's repo in 2018: You will need to update some of the dependencies as well as add a few (i.e. babel-cli and webpack-cli). It's also recommend that you install both webpack and babel locally vs globally per their documentation. Here's my fork with the working code: github.com/chadpjontek/webpack_app
Your video are awesome.
Hey Traversy , your videos is amazing , one question can we use webpack with wordpress? if so can you make a tutorial of how we can setup it with wordpress theme?
Thanks, Brad, great as always.
If you're struggling to follow the vid because of errors, I believe it has to do with the tutorial being outdated. Even the solutions suggested in the comments could be outdated. I suggest going through the original documentation: webpack.js.org/guides/getting-started/
Feb 2023: How does "webpack-dev-server" know to show "index.html" into the port 8080? Where did we specify it? 30:20. Would be thankful if sb could help!
Excellent tutorial!
Awesome work i like your tutorials.
You need to add the -o flag before bundle.js depending on which version you're using (I think)
webpack app.js -o bundle.js
Overall good tutorial, though I think you didn't spend enough time going over the how and why things work in the end. I watched the entire video and still have some pretty important questions left to ask:
1. Why does $ = require('jquery') just work? Since people will be using webpack to include all kinds of libraries, its probably important to explain how webpack actually knows to grab jquery out of node_modules.
2. Shouldn't your index.html file NOT be bringing in files from 'dist/'? Since dist stands for 'distribution', shouldn't you have put all your assets inside 'src' and be linking relative to INSIDE the dist folder? dist is what would be deployed in the end, NOT your entire project, which is where your html is currently sitting.
3. How does webpack work with image assets?
4. Why respecify webpack entry/output configuration for the server when you could just using the '--config' directive and reuse the webpack.config.js file? Removes the need to duplicate config info.
thank you for free videos