Webpack 4 Tutorial 13: Webpack dev server

preview_player
Показать описание
Let us learn about webpack dev server.

------------
Don't forget to subscribe and like the video if you enjoyed :)
  1. Mehul - Codedamn
  2. webpack
  3. webpack 4
  4. webpack tutorial
  5. webpack 4 tutorial
  6. webpack tutorials
Рекомендации по теме
Webpack 4 Tutorial 0:05:37

Webpack 4 Tutorial 13: Webpack dev server

Webpack 4 Tutorial 0:05:01

Webpack 4 Tutorial 12: libraryTarget

Webpack Tutorials - 0:05:17

Webpack Tutorials - 13 CommonJS Export

Webpack 4 Tutorial 0:05:28

Webpack 4 Tutorial 15: Webpack hot reloading

WebPack Tutorial | 0:49:00

WebPack Tutorial | WebPack Tutorial for Beginners | WebPack in Angular

Webpack 4 Tutorial 0:20:51

Webpack 4 Tutorial - Getting Started for Beginners

WEBPACK TUTORIAL: Webpack 0:24:43

WEBPACK TUTORIAL: Webpack 4 Dev Server with Zero Configuration

Webpack 4 Tutorial 0:01:37

Webpack 4 Tutorial 5: configuration intro

Learn Webpack - 1:53:01

Learn Webpack - Full Tutorial for Beginners

Webpack 4 Tutorial 0:04:38

Webpack 4 Tutorial 4: zero configuration setup

Webpack Tutorial - 0:03:35

Webpack Tutorial - #13 - Loaders

Webpack 4 Tutorial 0:02:13

Webpack 4 Tutorial 2: What is Webpack?

Webpack 4 Tutorial 0:02:29

Webpack 4 Tutorial 3: Webpack vs other tools

Webpack 4 Tutorial 0:03:47

Webpack 4 Tutorial 14: Write to disk

Webpack 4 Tutorial 0:02:47

Webpack 4 Tutorial 7: entry option

Webpack 4 Tutorial 0:04:38

Webpack 4 Tutorial 10: Available placeholders

Everything You Need 0:18:17

Everything You Need To Know About Webpack | Webpack Tutorial

Learn Webpack 5 0:20:49

Learn Webpack 5 - Webpack beginner tutorial

webpack Tutorial: devServer 0:37:07

webpack Tutorial: devServer & Hot Module Replacement (Live Reload)

Webpack 4 - 0:06:58

Webpack 4 - #2 Configuración de Webpack Dev Server - Tutorial

Webpack Module Bundler 0:02:22

Webpack Module Bundler | Webpack Tutorial in 2 Minutes

Webpack and Babel 0:17:30

Webpack and Babel Tutorial - Adding setup into project

WEBPACK + MULTIPLE 0:09:16

WEBPACK + MULTIPLE HTML FILES | Webpack 2 Basics Tutorial

Webpack & TypeScript 0:05:24

Webpack & TypeScript Setup #6 - Source Maps

Комментарии
Автор

Apparently with the latest version of webpack-cli (4.2.0) running dev is a little bit different:

change "dev" "webpack serve" in package.json:

"scripts": {
"dev": "webpack serve",

"build": "rm -rf build && webpack"
}

optionally add the open section in webpack.config.js to automagically load the webpage:

devServer: {
port: 1234,
contentBase: path.join(__dirname, 'dist'),
open: {
app: ['Chrome', '--incognito']
}
}

The above works for:
"path": "^0.12.7",
"webpack": "^5.8.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"

Enjoy,
Maarten

SoftAsInSoftware
Автор

quick question : Where is /assets/ folder

JaySinhaNZ
Автор

if your terminal is throwing error for "contentBase" unknown property. Just replace it with "static"

mohitmohlia
Автор

I'm implementing webpack for my company and am over my head. Is the dev server good to use for a medium company?
I am currently using the proxy server to send ajax to the backend. But I suspect that this won't work on the production server due to differing ports and such. How do you handle this on a larger scale.

sagebias
Автор

why u added <script
??? wont web pack add this on its own ?

yashchauhan
Автор

Thank you for this content!
I also got the error for "contentBase" and the way how it was fixed was by adding this line instead of contentBase:

Instead of:
devServer: {
port: 1234,
contentBase: path.join(__dirname, "dist")
},

I did this and it worked perfectly:
devServer: {
port: 1234,
static: './dist',
},

codingsuccessfully
Автор

Copied this word for word. Didn't work! 'Could not find webpack-dev-server.js in node_modules', even though I checked and it's definitely there. very strange.

richardcross