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
29
votes
1 answer

Why am I not being able to compile SASS with Webpack?

I have the following modules in my Webpack config: module: { preLoaders: [ { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, …
PedroD
  • 5,670
  • 12
  • 46
  • 84
28
votes
3 answers

Proxy websockets connection within webpack-dev-server

Is it possible to proxy websocket connections within the webpack dev server? I know how to proxy regular HTTP requests to another backend but it's not working for websockets, presumably because the target in the proxy configuration starts with…
Martin Grůber
  • 763
  • 1
  • 7
  • 17
27
votes
2 answers

How can I proxy to a ssl endpoint with the webpack-dev-server proxy

When I try to proxy this http://localhost:9000/rpc request, I receive: cannot proxy to https://example.appspot.com:80 (write EPROTO 101057795:error:140770FC:SSL routines: SSL23_GET_SERVER_HELLO:unknown…
voscausa
  • 11,253
  • 2
  • 39
  • 67
27
votes
3 answers

bundle.js file output and webpack-dev-server

I have this output configuration in my webpack.config file: config = { ... output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: 'http://localhost:8090/' …
mguijarr
  • 7,641
  • 6
  • 45
  • 72
26
votes
1 answer

WebSocket connection to 'ws://localhost:4000/sockjs-node/612/2pdjfv15/websocket' failed: Connection closed before receiving a handshake response error

I'M using Browser Sync with webpack-dev-server, And facing the issue while using browser sync..!! only form fill up is working, click, scroll is not working in browser sync, and there is no any compile time error occurring, But above things are not…
25
votes
3 answers

Text content did not match. Warning in React 16

I trying to build ReactJs application with server side rendering My entry points for client and server: client.jsx const store = createStore(window.__INITIAL_STATE__); hydrate(
Pavel Perevezencev
  • 2,596
  • 3
  • 28
  • 49
25
votes
4 answers

Redux - how to keep the reducer state during hot reload

I use React + Redux + Webpack + WebpackDevserver. Once the hot loader is launched all my reducers are reseted to the initial state. Can I keep somehow my reducers in the actual state? My Webpack config contains: entry: [ …
Tomas Randus
  • 2,127
  • 4
  • 29
  • 38
24
votes
7 answers

How to fix "webpack Dev Server Invalid Options" in Vuejs

I am using @vue/cli v3.7.0 and I created a project by vue create myapp with Babel + Router + node-sass and my project got installed successfully But when I ran npm run serve (in the project directory) I got following error: INFO Starting…
Arti Singh
  • 401
  • 1
  • 3
  • 12
24
votes
3 answers

Webpack - [HMR] and [WDS] firing twice

I'm getting messages like [HMR] Waiting for update signal from WDS... and [WDS] Hot Module Replacement enabled. twice in Dev Tools console. Why is that? Am I doing something wrong? My webpack.config.js file: ... module.exports = () => { …
Jan Chalupa
  • 887
  • 1
  • 9
  • 27
24
votes
3 answers

webpack-dev-server proxy: context with wildcard

I want to proxy /v1/* to http://myserver.com, and here is my script devServer: { historyApiFallBack: true, // progress: true, hot: true, inline: true, // https: true, port: 8081, contentBase: path.resolve(__dirname, 'public'), proxy:…
Arthur Xu
  • 441
  • 1
  • 5
  • 12
24
votes
2 answers

Set up webpack to run locally on a custom domain over HTTPS

In order to use a module I want to integrate into my application (I am developing locally), I have to do two things: 1) Make my application run locally on HTTPS. 2) Run the application with a specific domain. Both of these things should be pretty…
pmcote
  • 721
  • 1
  • 6
  • 9
24
votes
3 answers

Webpack creating large file with small project

I got my webpack generating a large main.js file (1.7mb) with a small project of ~20-30 files less than 100 lines each. The dependencies required are few in number (React, Fluxible) and I am using every optimize plugin I can…
Mohamed El Mahallawy
  • 13,024
  • 13
  • 52
  • 84
23
votes
4 answers

How to use multiple configuration files in webpack?

I'm building a webpack automated workflow. I completed the development server. All of my development configurations are in webpack.config.js file. Then, I add it into package.json script via 'dev':'webpack-dev-server' How would one make a…
Kousher Alam
  • 1,005
  • 1
  • 15
  • 30
23
votes
2 answers

Using the Webpack dev server with a PHP application

Has anybody had an experience with installation webpack dev server on Laravel 5+ (5.1 in my case)? I'm going to use my laravel PHP backend with the ReactJS frontend and I would like to have webpack dev server on my dev env. But I'm confused with a…
Black Akula
  • 616
  • 2
  • 6
  • 13
23
votes
2 answers

How to use webpack-dev-server multiple entries point

I would like to use the webpack-dev-server to host multiple entry points at one PORT. My current config is below: entry: { //Application specific code. main: [ `webpack-dev-server/client?http://${config.HOST}:${config.PORT}`, …
Hao
  • 1,476
  • 3
  • 15
  • 20