Webpack 2 with Webpack Dev Server Configuration

What you will learn:

- How to setup few advanced options with Webpack Dev Server

Working files:

Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. Thank you!

THE BEST OF

SUBSCRIBE

LET'S CONNECT!
Ihatetomatoes

Petr Tichy

[abdulazizalghafli]

Great tutorial and very helpful. Thank you.

[jinshuenjameslo]

you wanna know what we feel about the series?
yeah you save my arse

[adip]

Hi The tutorials are really nice.. Could you please tell how to debug the files served through webpack?

[arthurprather]

webpack-dev-server 2.5+ has bug on open: true... Whenever you run server, it'll end up with localhost:9000/undefined

Two working solutions... downgrade web-dev-server 2.4 or include --open in package json i.e. "dev:: "webpack-dev-server --open"

[sergeysokolov]

and, of course, it entains a 404 error. what is wrong?

[jonzvidad]

Hi, I got an error when i try to place this to the config

devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
},

anyone help please?! : (

[Alex-bdux]

Webpack Dev server - great tool, but better solution for me is browser-sync. Good work + you can use external link, and testing your pages on mobile devises in real time.

Just install -D browser-sync-webpack-plugin and browser-sync itself.

config file (plugins):

const BrowserSyncPlugin =

new BrowserSyncPlugin({
// host: 'localhost',
host: '192.168.1.102', //ip of local wifi - for other devices
port: 3000,
server: { baseDir: ['dist'] },
reload: false
})

[ahmedb.hameed]

Thanks for the great tutorials.
I have issue with [HMR] Nothing hot updated but the .html file has already some changes!!!
i should make force refresh (myself) to see the changes?? this is wired right ?
i'm using VSC so there is no safe write as i search about.
I use to develop a project from scratch so no react packages available.

// This is the serve configuration part

devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
stats: "errors-only",
watchContentBase: true,
hot: true,
inline: true,
open: true,
port: 9000,
openPage: ''
},
devtool: "source-map", // show .map files for better debugging.


// also this is the htmlWebpackPlugin configuratiopn

const extractHtml = new htmlWebpackPlugin({
title: 'Admin Panal',
minify:{
collapseWhitespace: false
},
hash: true,
template: './src/index.html'
});

Any ideas ??

[nemnoton]

Very nice!
I didn't quite understand "contentBase". Does the "contentBase" change so it becomes served from "dist" instead of memory?

The zipping was new to me also..very interesting.
Had to read on it, found some info here
So you can see in the console that it was sent as "Accept-Encoding:"gzip, deflate", Interesting.

[MichelaFederico]

all tutorials up to this one were pretty straight forward but I'm kinda stuck now.
webpack-dev-server is loading the directory instead of the main file but if I go to the url localhost:<port>/main.html everything runs perfectly. Also for some weird reason I don't get port 8080 but a random port and if I specify port 8080 from the webpack.config.js I get errors. Again, if I use any other port runs fine. Any ideas?

[Adarsh]

Documentation says all assets are compressed. But I don't see the app.css having the 'Content-Encoding' response header as gzip. !!! Looks like only JS is compressed by default.

[zachary]

I was getting referenceError: path is not defined. The solution was to add var path = require('path'); to the top of the webpack.config.js file.

[mikelovesjulia]

Didn't notice the open parameter in the docs, however there was a reference to it in 1.0x where you add it as a flag to the test scripts:

webpack-dev-server --open

Does that sound right to you?

[abhishekdutta]

Hey peter! Amazing set of videos. I never tried webpack before I watched all of this. You have explained everything in detail and covered almost everything what a developer will need in chronological order. The best ever series for webpack. Thanks :)

[edizcelik]

Great series! I have one question though. Whenever I add something to my index.html, I need to refresh the page. Webpack dev server doesn't load it automatically. Any solution on that ?

[ciangunarr]

How do I disable the ugly output in production using webpack script?

[arockiamkaspar]

Thanks for answering webpack-dev-server reads from memory. i spent lot of time to find ans. One questions is that, why do we get a msg like while running webpack-dev-server. "Content NOT from webpack is served from"? i do not understand this. Thanks again! Peter.

[hoaleang]

thanks so much Sir, it is great series

[goldpalani]

Hi..I successfully run the webpack on local host but on server not appended the server URL

[DamLee]

Super tut teacher!
what if we want to add some extra css or scss file like bootstrap framework or sometihing like that? the webpack.congif.js remains the same?
thx