Stack Overflow
Stack Overflow

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.

2877 questions
204
votes
13 answers

I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

I am using as an environment, a Cloud9.io ubuntu VM Online IDE and I have reduced by troubleshooting this error to just running the app with Webpack dev server. I launch it with: webpack-dev-server -d --watch --history-api-fallback --host $IP…
Artur Vieira
  • 3,449
  • 3
  • 9
  • 9
199
votes
13 answers

How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. So I am playing around with reactabular.js. Whenever I do a npm start it always runs on localhost:8080. How do I change it to run on 0.0.0.0:8080 to make it…
90abyss
  • 5,687
  • 13
  • 49
  • 81
167
votes
28 answers

Cannot find module 'webpack/bin/config-yargs'

Getting error when running webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/. Here is the error log: module.js:442 throw err; ^ Error: Cannot find module 'webpack/bin/config-yargs' at…
Aleksandar Terziev
  • 1,808
  • 2
  • 7
  • 10
117
votes
8 answers

webpack can't find module if file named jsx

As I write webpack.config.js like this module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { …
qiuyuntao
  • 1,896
  • 4
  • 14
  • 23
102
votes
4 answers

Webpack-dev-server serves a directory list instead of the app page

I can only see the actual app under /public. The configs in webpack.config.js are below: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', …
Jason Lam
  • 1,264
  • 3
  • 12
  • 17
99
votes
2 answers

Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

I'm starting working with webpack with a node/express environment developing a ReactJS server side rendered application with react-router. I'm getting very confused about the role of each webpack package for dev and prod (runtime) environments. Here…
Mendes
  • 13,757
  • 24
  • 122
  • 217
99
votes
8 answers

Webpack how to build production code and how to use it

I am very new to webpack, I found that in production build we can able to reduce the size of overall code. Currently webpack builds around 8MB files and main.js around 5MB. How to reduce the size of code in production build? I found a sample webpack…
Gilson PJ
  • 3,002
  • 2
  • 25
  • 47
97
votes
5 answers

Multiple html files using webpack

I'm trying to do something in a project that I'm not sure if it is possible, I am in a wrong way or misunderstanding something. We are using webpack, and the idea is to serve more than one html file. localhost:8181 -> serves…
miguelitomp
  • 1,113
  • 1
  • 8
  • 7
96
votes
10 answers

Webpack: silence output

I would like to know if there's a configuration option to tell webpack to only log the "important information" to the terminal. Pretty much just errors and warnings, not all of this: There's just so much output! Would love to suppress the common…
kentcdodds
  • 20,934
  • 27
  • 99
  • 178
88
votes
12 answers

Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

I'm trying to use webpack-dev-server to compile files and start up a dev web server. In my package.json I have the script property set to: "scripts": { "dev": "webpack-dev-server --hot --inline", } So the --hot and --inline should enable the…
Chris Schmitz
  • 16,386
  • 23
  • 70
  • 118
76
votes
6 answers

How to include css files in Vue 2

I'm new to vue js and trying to learn this. I installed a fresh new version of vue webpack in my system. I'm having a css, js and images of this a theme template which I want to include into the HTML so i tried adding it in index.html but I can see…
Nitish Kumar
  • 5,259
  • 12
  • 57
  • 123
75
votes
9 answers

Mocha testing failed due to css in webpack

I'm new to Mocha and I am trying to use it to test a simple React component. The test would pass if the react component doesn't have any CSS styling but throws a syntax error if the tag within the React component contains any…
Yi Ren
  • 822
  • 1
  • 7
  • 16
68
votes
12 answers

TypeError: CleanwebpackPlugin is not a constructor

i'm trying to preview a vue web application through webpack-server-dev.I'm following this guide https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34 The guide explains that the plugin is used to delete old and unused…
ECallpani
  • 781
  • 1
  • 4
  • 5
67
votes
5 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
  • 54,098
  • 26
  • 117
  • 143
64
votes
4 answers

Serving static assets in webpack dev server

I run webpack-dev-server from the root folder of my project. I have assets folder in /src/assets that is copied by CopyWebPackPlugin: new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]) If I put logo.png inside assets folder then After…
Rem
  • 9,865
  • 11
  • 38
  • 59
1
2 3
…
99 100