Webpack compiling but not serving files

Question

I am currently having trouble getting my index.js file to be served on localhost through Webpack.

Webpack seems to compile without issue, and the webpack serve script does start the webpack-dev-server when used and serves my index.html file. However, after I created the webpack.config.js file, the problem is that the webpack script compiles the files but does not start the server.

package.json

{
  "name": "react-architecture",
  "version": "1.0.0",
  "description": "A tutorial on React Architecture",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nick Norris",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  watch: true,
  output: {
    path: path.resolve(__dirname, "public/js"),
    filename: "main.bundle.js",
  },
};

Console output: npm run serve

    $ npm run serve
    
    > react-architecture@1.0.0 serve C:\Users\18502\Documents\React Architecture
    > webpack serve
    
    [webpack-cli] No need to use the 'serve' command together with '{ watch: true }' configuration, it does not make sense.
    i ｢wds｣: Project is running at http://localhost:8080/
    i ｢wds｣: webpack output is served from /
    i ｢wds｣: Content not from webpack is served from C:\Users\18502\Documents\React Architecture
    i ｢wdm｣: asset main.bundle.js 368 KiB [emitted] (name: main)
    runtime modules 1010 bytes 5 modules
    modules by path ./node_modules/ 336 KiB
      modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
      modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
      modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
      modules by path ./node_modules/url/ 37.4 KiB 3 modules
      modules by path ./node_modules/querystring/*.js 4.51 KiB
        ./node_modules/querystring/index.js 127 bytes [built] [code generated]
        ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
        ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
    modules by path ./src/ 131 bytes
      ./src/index.js 66 bytes [built] [code generated]
      ./src/components/add/add.js 65 bytes [built] [code generated]
    webpack 5.46.0 compiled successfully in 339 ms
    i ｢wdm｣: Compiled successfully.

Console output: npm run webpack.

$ npm run webpack

> react-architecture@1.0.0 webpack C:\Users\18502\Documents\React Architecture
> webpack

asset main.bundle.js 4.24 KiB [compared for emit] (name: main) 
runtime modules 670 bytes 3 modules
cacheable modules 131 bytes
  ./src/index.js 66 bytes [built] [code generated]
  ./src/components/add/add.js 65 bytes [built] [code generated]
webpack 5.46.0 compiled successfully in 76 ms
assets by status 4.24 KiB [cached] 1 asset
cached modules 131 bytes (javascript) 670 bytes (runtime) [cached] 5 modules
webpack 5.46.0 compiled successfully in 10 ms

I have tried a few things, like renaming the files and moving them around in the file explorer to see if the output wasn't pointing to the correct file, but that did not work. When using the webpack script, nothing I do to the files stops the compilation, even if I completely delete and then save code blocks.

This issue seems to be very similar, and I am getting the same "ERR_CONNECTION_REFUSED" message, but the local server runs fine when using webpack serve , which makes me think I am just missing something obvious in one of my configuration files.

Answer 1

You need to add the devServer attribute DevServer webpack-dev-server can be used to quickly develop an application. See the development guide to get started.

This page describes the options that affect the behavior of webpack-dev-server (short: dev-server).

Tip Options that are compatible with webpack-dev-middleware have 🔑 next to them. devServer object

This set of options is picked up by webpack-dev-server and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our dist/ directory in the project root:

webpack.config.js

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

When the server is started, there will be a message prior to the list of resolved modules:

http://localhost:9000/ webpack output is served from /build/ Content not from webpack is served from /path/to/dist/ that will give some background on where the server is located and what it's serving.

If you're using dev-server through the Node.js API, the options in devServer will be ignored. Pass the options as a second parameter instead: new WebpackDevServer(compiler, {...})

Answer 2

You are right that webpack will not start the server based on the build we configured. Here is the code for the tutorial you watched.

https://github.com/chawk/react_architecture_tutorial

As Ernesto mentioned, you can have all of this done at once. In the tutorial, I just kept them separate to make it easier. I used 2 separate command prompts, one to build and one to run the dev server.