Questions tagged [webpack-dev-server]

1

votes
1

answer
417

Views

Webpack config output filename using square brackets params instead of a plain text

In webpack.config.js, in output.filename I see square brackets. What does that mean? What's the difference between using that and a plain text? output: { filename: '[name].js', // Webpack dev middleware, if enabled, handles requests for this URL prefix publicPath: 'dist/' },
kumar
0

votes
0

answer
2

Views

How to log the rewritten urls in webpack dev server proxy

Is there any way to log the request urls in the webpack dev server proxy? I tried logging in the onProxyReq method in the proxy and tried setting the debug: true and logLevel: 'debug' values too but neither of them are showing any logs in my console when I make a request.
Nahush Farkande
0

votes
0

answer
9

Views

webpack 4 react build causes token error, but run start works

After a build with webpack I am getting the Uncaught SyntaxError: Unexpected token error. I am able to run start and it will load that way. So I know this must be a problem with the output, or so I would imagine. The index.html is generating properly, as is the bundle.js. I have that as a path on...
lakerskill
0

votes
0

answer
3

Views

Migrating from webpack 2 to webpack 4

I'm trying to migrate a project I'm working on from webpack 2.4.1 to the most recent version 4.29.3. (A much needed upgrade, I know) I think I have converted everything correctly, from replacing extract-text-webpack-plugin to mini-css-extract-plugin, etc. The problem occured when I tried to replace...
RandomStranger
1

votes
1

answer
486

Views

webpack-dev-server dynamic port

Is it possible to find a unused port for webpack-dev-server? My current configuration does look like: devServer: { historyApiFallback: true, inline: true, host: '0.0.0.0', port: 3000, contentBase: helpers.root('public'), stats: 'minimal' }
Max Heyer
1

votes
3

answer
6.6k

Views

npm err missing script webpack-dev-server

I'm making a Reactjs app with wepback and i can't figure out why npm run webpack-dev-server is not working. I installed the package and even installed it globally. every time i'm getting the same error as mentioned. my webpack.config.js: var webpack = require('webpack'); var path = require('path');...
Tamir Huber
1

votes
2

answer
3.1k

Views

export 'ɵcmf' was not found in '@angular/core'

When starting webpack-dev-server following warning is thrown: WARNING in ./~/@angular/compiler/@angular/compiler.es5.js 11051:13-17 "export 'ɵcmf' was not found in '@angular/core' WARNING in ./~/@angular/compiler/@angular/compiler.es5.js 11056:13-17 "export 'ɵmod' was not found in '@angular/core'...
Aides
1

votes
1

answer
2.2k

Views

Webpack DevServer -> proxy HTTPS resource -> UNABLE_TO_VERIFY_LEAF_SIGNATURE

I'm using Webpack DevServer with the following settings: devServer: { proxy: { '*': { target: 'https://localhost:44369', secure: true } }, port: 8080, host: '0.0.0.0', hot: true, https: false } https://webpack.js.org/configuration/dev-server/#devserver-https It has worked fine with HTTP but when I'm...
Ogglas
1

votes
2

answer
260

Views

webpack-dev-server hot reloading does not work on the case that use vim edit files

when I use vim editor like vim xx.js and :w or :wq or :w! save the file. the webpack-dev-server HRM does not notice that. and even I reloaded page manually that's not ok.
honger05
1

votes
1

answer
1.4k

Views

Configure webpack-dev-server to play nice with different existing vhosts for assets and application

I am trying to set up non-standard webpack-dev-server proxy configuration. Following reading: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server Basically my local web server web root is: http://website.dev and my local asset server is http://website.assets I wa...
Elise Chant
1

votes
1

answer
1.2k

Views

Proxying request from webpack 2 using webpack-dev-server to backend api in docker containers

I am trying to proxy my http request to express server running in backend using docker containers but I am getting HTTP 504 in browser console and following error in docker terminal HPM] Error occurred while trying to proxy request /api/getData from localhost:8080 to http://localhost:3001 (ECONNREFU...
deeps
2

votes
1

answer
312

Views

Webpack-dev-server does not rebuild bundle

Very strange moment. I have: webpack.hmr.config.js // webpack.hmr.config.js const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const WebpackChunkHash = require('webpack-chunk-hash'); const commonExportsObject = require('./webpack.common.config'); const...
1

votes
1

answer
519

Views

What is sunproxyadmin service?

I was trying to run a front end project locally after pulling it down from git. After which I got the following error: vents.js:183 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE 127.0.0.1:8081 at Object._errnoException (util.js:1022:11) at _exceptionWithHostPort (util.js:1044:20) a...
Naruto Sempai
9

votes
0

answer
148

Views

webpack dev server: watch arbitrary directory files and reload

Is it possible to make webpack-dev-server reload whenever a specified set of arbitrary files changes? Something along the lines of: devServer: { watchTheseFiles: [ 'path/to/files', 'path/to/more/files' ] } And even more granularly, can I specify a regex of which files to watch? I'm doing this as a b...
clo_jur
9

votes
4

answer
1.4k

Views

How to get Webpack Dev Server to display images stored locally?

I migrated a project I have been working on to Webpack 2 and this has been kind of a headache. But I have gotten my project to preview using Webpack dev server, except it won't show my image. All I get is this error in the browser console GET http://localhost:8080/logo.jpg 404 (Not Found) and in Mac...
feners
3

votes
1

answer
148

Views

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 in order to pick up the new changes. As suggested...
Gilian
3

votes
2

answer
1.9k

Views

React webpack undefined react in console

I have problem with webpack build I write custom webpack config: https://github.com/Simproduction/react-client-webpack but when I run dev or build a project everything work correct but I can't call React from console or use react developers tools I get error Uncaught ReferenceError: React is not de...
Sebastian
3

votes
1

answer
1.2k

Views

Wordpress redirecting to localhost instead of virtual host when being proxied by Webpack Dev Server

I am trying to do a relatively simple set up with: An Apache server with a virtual host for the HTML. Webpack and the Webpack Dev Server for asset reloading and generation. To accomplish this, the Webpack Dev Server proxies the other server to pass through requests that it doesn't know how to handle...
mummybot
1

votes
2

answer
200

Views

Node build command not working

I am using this config in package.json file for running webpack dev server. I want to use a build command as well, but its not working for me { "name": "Demo", "version": "1.0.0", "description": "Demo App", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot", "build": "webpack --wat...
h_h
2

votes
1

answer
223

Views

SyntaxError: expected expression, got '<' error - vue

When I developed my vue project in my local environment(run npm run dev command), for the first-page loading, there is no error. But when I hit the refresh button, the console output a "SyntaxError: expected expression, got '
ChenLee
16

votes
3

answer
29.6k

Views

Webpack + Babel: Couldn't find preset “es2015” relative to directory

I have a React project using Webpack and Babel. When I created it on an office computer, the Webpack ran fine. When I cloned the project onto my personal computer, it gave the following error: ERROR in ./react_minesweeper.jsx Module build failed: Error: Couldn't find preset "es2015" relative to dire...
Louis Cruz
1

votes
1

answer
445

Views

How to restart Encore after making changes to webpack.config.js

I'm using Symfony with Encore and after reading through this article, it says to restart encore after making changes but I can't find the command to do so. I tried setting up nodemon to watch webpack.config.js and it throws an error yarn run v1.9.4 $ nodemon --watch webpack.config.js ./node_modul...
Dan185
17

votes
5

answer
10.4k

Views

webpack hot module replacement: css without refresh

So far I've been using livereload so that whenever I change JS or templates, the page refreshes, and when I change CSS, it would hotswap the new CSS without a refresh. I'm trying out webpack now and nearly got to the same behaviour, with one exception: when the CSS changes, it refreshes the whole wi...
17

votes
1

answer
9.2k

Views

How to configure webpack dev server with react router dom v4?

This is the code of my webpack configuration: const compiler = webpack({ entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], module: { loaders: [ { exclude: /node_modules/, test: /\.js$/, loader: 'babel', }, ], }, output: {filename: 'app.js', path: '/'}, }); const app = new Webpac...
i am gpbaculio
17

votes
9

answer
25.3k

Views

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 Function.Module._resolveFilename (module.js:440:15) at Function.Mo...
Aleksandar Terziev
3

votes
3

answer
2.8k

Views

webpack and react jsx - hot loading not working with docker container

Changed to: hot loading does not work in docker and it looks like it is a docker issue. Following this: React with webpack or this React hot loader on local host machine they work fine and to me, they work the same - still I dont get why you would install React hot loader? But running it in a contai...
Chris G.
18

votes
2

answer
11.3k

Views

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

My problem is simple. 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 (...or not?...) As a result,...
Dimitris Karagiannis
5

votes
1

answer
102

Views

Nodejs won't set cookie for React CRA application even with proxy

I have a nodejs/express + React CRA application, and I'm trying to set a cookie from nodejs. The server is on port 4001, so in my React application's project.json I have "proxy": "http://localhost:4001" set, but the cookie still won't get set in the browser. I've tested it in production mode as well...
chrispytoes
2

votes
2

answer
2.4k

Views

Inject webpack-dev-server.js

I would like to inject the webpack-dev-server.js file. However according to the documentation this should be done manually and only with the full url: From: http://webpack.github.io/docs/webpack-dev-server.html#api Notice that [...] there is no inline mode for WebpackDevServer API. should be inserte...
jantimon
4

votes
3

answer
1k

Views

How to integrate karma in webpack

I am a webpack newbie and have a question about testing. I have a project which uses webpack, typescript and karma as test runner and I would like to run my tests on every file change (e.g. in "watch" mode) I am aware of karma-webpack and it works well when I run karma as own process (karma start ....
maku_at
3

votes
0

answer
323

Views

webpack - hot reload on linked node_module change

In my local environment, I have my primary project (A) which links to another project/local library (B) via npm link. When I make updates to Project B, I have to run a build and then re-assert the link. After this completes, I then have to re-compile Project A via webpack by making a change to a fi...
Plummer
4

votes
3

answer
193

Views

Component files not importing in webpack react project?

I've set up a pretty simple React app and I can't get any of my components to import to index.js. My index.js, which contains the definition of my main class, works fine, and has this line for example: import { IntroductionPage } from './Components/IntroductionPage.js'; With a nice definition of th...
Aerovistae
19

votes
3

answer
11.8k

Views

Can't get webpack hot module replacement to work

I've set up WebPack successfully - it's compiling my babel and SCSS files just fine, and I got the watch functionality to work fine. But I'd also like to work with the Hot Module Replacement - and I'm having difficulties getting it going. When I load the dev server in my browser it shows Cannot reso...
Alastair
19

votes
6

answer
6.3k

Views

Is there a way to make webpack not show all the chunks it's compiling?

The default webpack CLI output is way too verbose for my liking. As soon as I import React from one of my files, the output explodes, showing all of the chunks (?) being packed: webpack result is served from / content is served from /Users/me/myproject Hash: aaaf5afc6582f3222f55 Version: webpack 1.1...
Cam Jackson
19

votes
3

answer
13.1k

Views

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 understand: module.exports = { output: { path: './build', publicPath: '/pub...
19

votes
2

answer
9.7k

Views

Proxy requests to a separate backend server with vue-cli

I am using vue-cli webpack-simple template to generate my projects, and I'd like to proxy requests to a separate, backend server. How can this be easily achieved?
Mahmud Adam
5

votes
2

answer
1.8k

Views

How to output .html to disk using Webpack-dev-server and HTML-webpack-plugin

I use webpack and html-webpack-plugin to update my index.html file with the generated script bundle, such as bundle.[hash].js. Then I have to run webpack-dev-server so I can load that bundle into memory and take advantage of Hot Module Replacement. This makes the code compile twice. However, what I...
TetraDev
5

votes
3

answer
16.3k

Views

How to run Webpack Dev Server --https --hot --inline

Is there a way to leverage running the webpack-dev-server on https when configuring using CLI? The problem is the connection to socket.io is over http and not https. A workaround exists, but its very annoying. Manually include https webpack-dev-server in your index.html Configure each end point to i...
chemoish
5

votes
1

answer
5.8k

Views

Environment variable with webpack on dev and production

I am pretty new to the world of using such build tools like Webpack and its relatives, so maybe this question is a little noobish but please understand me. background: I am developing an client side web app (using reactjs + redux) and using webpack as my build tool and dev-server loader. Right now I...
Dima Gimburg
5

votes
2

answer
3.6k

Views

Can't access web-page started by webpack-dev-server on vagrant

Starting with React and Flux architecture but met some infrastucture troubles. I can't access the web-page started by webpack-dev-server on the vagrant box (scotch-box). The command starts the application on localhost:3002, my vagrant box has an IP (192.168.33.10) address in Windows host machine an...
Dmytro Medvid

View additional questions