USING THE WEBPACK DEV SERVER | Webpack 2 Basics Tutorial

Подписаться 919 тыс.

Просмотров 166 тыс.

50% 1

Learn Webpack 2 - what it is, how it works and how to use it!
The full source code can be found in the following Github repo (choose the right branch!): github.com/msc...
Want to become a frontend developer? Consider diving into some of my courses:
Angular vs React vs Vue - Quickstart and Comparison: acad.link/ng-v...
Ionic + Angular - The Practical Guide: acad.link/ionic
Angular - The Complete Guide: acad.link/angular
Vue.js - The Complete Guide: acad.link/vuejs
React.js - The Complete Guide: acad.link/reactjs
You can follow me on Twitter (@maxedapps), Facebook ( / academindchannel ) or visit our Website (www.academind.com).
See you in the videos!

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 94

@johnyepthomi892 2 года назад

I love you mission. You’re what we need as a coach . Huge respect to you .

@JulianSloman 7 лет назад

the tutorial title should be numbered!

@technovicebd 7 лет назад

It's better to follow tutorial from playlist. Then number is not required actually.

@simunji.a222 3 года назад

they are actually numbered in the first screen of each video (with a # 1/2)

@JamesQQuick 7 лет назад

Love the Webpack videos so far! One question, is your package.json file inside of the "src/" directory along with the index.html. Something seems odd to me. Inside of your package.json you are referencing "./src", but based on file indentation, it looks like the package.json is already in the "src' directory?

@academind 7 лет назад

No, package.json is in the root directory, not inside src/

@JamesQQuick 7 лет назад

Ok that makes much more sense. It just didn't appear that way based on the indentation of the files in the editor. Thanks for the follow up.

@aymenedafri7506 3 года назад

How does the webpack server know to server the index.html !!!!!!???

@siluverukirankumar9954 3 года назад

we have to tell webpack dev server that the where is the static files directory from for that we need to use --content-base option "webpack-dev-server --content-base ./src --entry ./src/index.js --output-filename ./dist/bundle.js" here my index.html is in src directory

@amanchaurasia9880 2 года назад

or we can directly use vscode live server extension.

@sushants_vlogs_officials 5 лет назад

hi can you please tell me how to convert html single page website with slider js into react need help...

@harishkanna6079 2 года назад

Webpack seems to be bundling all the js files. How does web-pack-server knows which file to render when you run the "npm run build" command?

@StreamCenter 7 лет назад

Great video, just a few notes. Before webpack I was using gulp/bower and there is a significant difference between a "task runner" like gulp and webpack which is actually a tool to build bundles, import js/css/images/stuff automatically. Many people are asking me why I should switch to Webpack if I am happy with gulp/grunt, they don't understant that they are different and webpack is more advances in achievement your goals. The simplest explanation for me is that gulp/grunt does not actually understand your js code, but Webpack does.

@nosajghoul 7 лет назад

I dont use gulp any more, but Webpack can be configured to transpile ES6, start a server, hot reload on save, integrate with babel, minify js / css, generate sourcemaps, etc... I find it simpler and more feature full than gulp.

@JohnSmith-zl8rz 6 лет назад

I think some use gulp and webpack at the same time, I need learn more to see if I really don't need gulp anymore, again I think both can works between.

@kedarpethe 2 года назад

best webpack dev server explainer video on the internet.... other videos and articles explain it superficially..

@khushboobaheti2571 3 года назад

can we have index.html as the entry point?

@siluverukirankumar9954 3 года назад

we have to tell webpack dev server that the where is the static files directory from for that we need to use *--content-base* option *"webpack-dev-server --content-base ./src --entry ./src/index.js --output-filename ./dist/bundle.js"* here my index.html is in src directory

@TheJacksonblair 3 года назад

Why does webpack automatically render your html file?

@lassaleelmahdi8311 7 лет назад

thank you ! amazing tutorial ^^, please i have an issue, when i run webpack server , it's redirect me to folders of project not my index.html, but if i open it without webpack server it's work fine , and nothing in network tab. i think my webpack.config.js not loaded correctely

@heyyy4987 6 лет назад

how work with https with webpack, its possible? in local machine.

@hamzahajji5814 7 лет назад

I have a question about the output file dist/bundle.js, if it's not located in the local project, then where does the server load it from?

@navin1992bisht 6 лет назад

How did webpack knew where your index.html was and that's the file needed to be loaded on browser?

@ricardogonzales2259 7 лет назад

What if i move the index.html file to "src"?

@subodhgarg2991 6 лет назад

Hi Max, bundle.js size increased from 3.5Kb to 325Kb on changing from webback to webpack-dev-server. Could you please explain?

@LOOTS243 6 лет назад

Because you are using webpack-dev-server instead of webpack. You don't use webpack-dev-server in production.

@supriyasunki5924 3 года назад

Amazing Tutorial I have an issue after webpack complie of nodejs app, open the index.html file, routes are not working. Can you tell how I can resolve this issue

@gltcoder6800 3 года назад

you look like magneto 😂😂

@aleksejsr2991 7 лет назад

If you get an error "Module not found: Error: Can't resolve 'loglevel' in .... ". It means that you should install this loglevel for your project. Simply use a command : npm install --save-dev loglevel.

@frontendmiracle1751 6 лет назад

*How do I pick the right node package versions that function well together?* Explanation: following this tutorial playlist at August of 2018, I installed webpack version “^2.2.1” & the latest webpack-dev-server version “^3.1.5”. These gave me the error: _invalid "instanceof" keyword value Promise_ The solution was to lower the webpack-dev-server version to the one used in this video. Without seeing this tutorial, how do I pick the right ones?

@leviticus3 5 лет назад

With a local server ran by webpack-dev-server, when publishing an app/site that would (maybe) require a different server from a local provider like godaddy, would it be necessary to rid off webpack's local server so another server provider like godady can used as its primary server? This question might be answered in the following video in this series, thanks for the answer anyways.

@thedacian123 5 лет назад

Hello,Webpack dev server is not able to create the bundle,hence to server the dist pages.Is there any error logs in order to fix this?

@zegmaarSietse 7 лет назад

Great video once again. Little question: Are there any pro's to using webpack-dev-server instead of something like MAMP to run a local server?

@academind 7 лет назад

If you don't need MAMP (i.e. you don't use PHP etc.) you should definitely go with webpack-dev-server => Auto-reloading and much faster! Of course, if you need PHP, there's no way around MAMP or a similar stack. webpack-dev-server runs on NodeJS and is not meant for any kind of backend development (not even NodeJS), it's only there to host your frontend apps

@busyrand 5 лет назад

These are outstanding explanations! I understand the current version of Webpack is at a later version, but hearing such a clear explanation for how things work gives me great relief.

@academind 5 лет назад

Thanks a lot for this great feedback, happy to read that the video was helpful!

@simunji.a222 3 года назад

Thanks my bro.i have learnt a lot from your videos. always clear and straight to follow. i subscribed

@hachij_ 7 лет назад

but we can setup webpack.config.js file right?

@chiragjain9575 7 лет назад

Dont add 'publicPath' while running dev-server, other wise you will have to bundle the file again and again to see the change. dev-server wont work then

@ValeryMalinov 5 лет назад

How config proxy dev server with https cookies on server side?

@yash6680 6 лет назад

your pronunciation of the word "series" reminds me of "sirius black"....

@academind 6 лет назад

Sometimes I cannot hide the German accent ;)

@yash6680 6 лет назад

that's okay.. your videos awesome anyways ^_^

@JohnSmith-zl8rz 6 лет назад

WEBPACK DEV SERVER is better than BROWSERSYNC?

@stefan3242 5 лет назад

Is there any benefits of using this instead of live server extension that is available fot atom visual studio etc

@amaanimtiyaz 5 лет назад

please help me with this error. Entry module not found " Error: Can't resolve './src' in 'D:\wd\javascript\Projects eactjs-basics"

@Byzzon 5 лет назад

Hey Amaan, I had the same problem. I fixed this by adding the following flag to the build script: --content-base ./src/ So the whole build script would look like this: "build": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js --content-base ./src/", Note: Make sure that the 'index.html' file is in the 'src' folder because that is what webpack will look after.

@ИванНевский-э5ы 5 лет назад

Thanks man!!!

@mburakerman 7 лет назад

You are awesome teacher! Thank you.

@academind 7 лет назад

Thanks so much Mehmet, great to hear you're enjoying it!

@Ahmed.r.a 7 лет назад

I really like your Videos, they are so useful. I've two question, What about Laravel? is there something similar to use in Laravel. because I hate every time I should make refresh to the browser to reload changes. can you make a special tut about the latest in front frameworks for developers? and where to start from. its kind of difficult to choose one from many like jQuery, Ajax, Vue, react and lots .etc. thank you in advance.

@academind 7 лет назад

I'm not aware of something comparable for Laravel but regarding the second part: Yes, I do plan to create some intro content for frontend devs.

@maxpayne6386 7 лет назад

No more need gulp right? I just can use webpack ))) Tnx Max ))) Like ))

@academind 7 лет назад

Yep!

@giorgizhghamadze2922 7 лет назад

may be very dumb question, but where do you reference jquery library?

@academind 7 лет назад

Got a video on that coming up soon :)

@PranayKotapi 7 лет назад

Let us know a link here once you're done, i'm confused about the same issue

@siluverukirankumar9954 5 лет назад

but bundle.js file unable to find after giving entry and output filename options

@Tharun4u1 5 лет назад

hi, did you solve this ? I have the same question

@jbsness5375 7 лет назад

Max is like a mentalist, each time I need to learn something, Max makes it real Thanks Mister Max you're still the best here !

@academind 7 лет назад

Haha, thanks so much - happy to hear you're liking the videos.

@TheEricBrian 6 лет назад

Great tut. When you say series, you pronounce it as serious. It always takes me aback. hehehehehe.

@academind 6 лет назад

Happy to read that you like it Eric! I try my best to pronounce everything correctly, but I guess I cannot hide not being an English native speaker :D

@jackytsui9619 7 лет назад

666

@doit4941 7 лет назад

please tell me which font instaled webstorm?

@academind 7 лет назад

Should be the default font - Menlo

@trapslime16 4 года назад

Perfect

@ericzorn3735 6 лет назад

This helps with the setup of Webpack so much!!!!

@academind 6 лет назад

It really means a lot to me to read that Eric, thank you!

@HardwareAddiction 7 лет назад

I think setting up the paths with ./ is optional. That is, it will resolve the file faster since you explicitly tell it to look up from cwd (current working directory).