Questions tagged [webpack-dev-server]

a Node.js based server that supports live reloading and is used for development of webpack powered applications.

webpack-dev-server is a little Node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is connected to the server via Socket.IO. The server emits information about the compilation state to the client, which reacts to those events by updating the bundle.

The server is used for development purpose only.

3256 questions
75
votes
6 answers

Running a node express server using webpack-dev-server

I'm using webpack to run my react frontend successfully using the following config: { name: 'client', entry: './scripts/main.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ …
Øyvind Bråthen
  • 59,338
  • 27
  • 124
  • 151
70
votes
8 answers

CORS error on request to localhost dev server from remote site

On Friday I had a working dev environment. On Monday I had a broken one. I encountered this error message in the Chrome dev-tools console for all my assets: Access to CSS stylesheet at 'http://localhost:8080/build/app.css' from origin…
69
votes
6 answers

npm run dev fails : ValidationError: Invalid options object

Currently learning Vue js and express js through some tutorials, I am still newbie regarding these technologies. Anyway following the tutorials I am building a small project in which I have a folder "Client" that contains the frontend side of the…
Dhouibi iheb
  • 943
  • 1
  • 6
  • 9
65
votes
12 answers

Webpack launch browser automatically

Gulp + live reload serves up my content on localhost and (here's what I'm after) launches the browser automatically at the server url whenever i run the gulp command (i.e I don't have to click the browser icon and navigate to the url manually). Can…
swelet
  • 8,192
  • 5
  • 33
  • 45
64
votes
3 answers

Webpack watch not working on Webstorm on Windows?

So basically I have a project using Webpack, if I build using Webpack -w, editing the file with another editor will trigger the watch; however if I edit the file using Webstorm, nothing will happen. I have came across this post, which seems I'm not…
luanped
  • 3,178
  • 2
  • 26
  • 40
63
votes
15 answers

Vue cli 3 hot reload suddenly not working in browsers

I have a Vue project generated by the Vue cli 3 and my hot reloading suddenly stopped working in my browsers. Changes made to the code are still picked up by the terminal, however, my browser is not picking up the changes. I have to manually refresh…
Gilian
  • 1,539
  • 2
  • 15
  • 27
62
votes
7 answers

How to pass .env file variables to webpack config?

I am new to webpack and worked out almost all build sections, but now the problem is that I want to pass the environment variables from a .env file to webpack config, so that I can pass that variables to my build files via webpack.DefinePlugin…
61
votes
10 answers

Webpack Dev Server Config - contentBase not working in latest version

When I upgrade webpack to 4.0.0-beta.3 and run npx webpack serve I get this error: [webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema. - configuration has an…
roms
  • 1,511
  • 1
  • 11
  • 12
60
votes
11 answers

How to serve an Angular 2 dist folder index.html

I'm using this angular 4 seed app: https://github.com/2sic/app-tutorial-angular4-hello-dnn It uses webpack and works fine. It only seems to serve the dev files and not the dist/ folder. I want to ng serve the dist folder. Not sure the command to do…
AngularM
  • 15,982
  • 28
  • 94
  • 169
57
votes
4 answers

How to use VS Code debugger with webpack-dev-server (breakpoints ignored)

I just want to make VS Code's debugger work with webpack-dev-server without ignoring my breakpoints. Now, webpack-dev-server serves the bundled files from memory, while, if I understand this correctly, the VS Code debugger searches for them on disk…
57
votes
6 answers

webpack-dev-server does not watch for my file changes

When I change my files while webpack-dev-server is running, the bundle's files are not updated. Here are my webpack.config.js and package.json files, as you can see from my npm script, I've solved running webpack watch and webpack-dev-server in the…
Jurgo Boemo
  • 1,690
  • 1
  • 15
  • 21
56
votes
3 answers

webpack-dev-server Cannot find module 'webpack'

I'm trying to use webpack-dev-server to run a simple program but I'm getting this error: module.js:471 throw err; ^ Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load…
yonBav
  • 1,695
  • 2
  • 17
  • 31
56
votes
6 answers

How to watch index.html using webpack-dev-server and html-webpack-plugin

I am using webpack-dev-server for development with html-webpack-plugin to generated the index.html with revision sources. The thing is every time I change the index.html the bundle system will not rebuild again. I know the index is not in the entry,…
hjl
  • 2,794
  • 3
  • 18
  • 26
54
votes
11 answers

Error: Cannot find module 'webpack-cli/bin/config-yargs'

'Github' asked me to update 'webpack-dev-server' to version 3.1.11 or higher for security reasons. However, 'npm run dev' will not run after the update. I don't solve this problem Error: Cannot find module 'webpack-cli/bin/config-yargs' The code for…
Sh031224
  • 769
  • 1
  • 7
  • 20
52
votes
12 answers

How to make webpack less verbose?

This is Wes Craven's New Nightmare! Why do I even need this horror on every little bit of change? How can I turn off these notifications?!
Vitalii Korsakov
  • 45,737
  • 20
  • 72
  • 90