Search code examples
node.jsreactjswebpack-dev-servercreate-react-app

How to setup create-react-app with webpack-dev-server

I'm trying to setup my create-react-app instance with webpack-dev-server.

This is my package.json file

{
  "name": "reactgs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack-dev-server --entry ./node_modules/react-scripts/bin/react-scripts.js --output-filename ./dist/bundle.js --inline --progress",
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.1"
  }
}

I don't have a webpack.config.js file.

When I run

npm run build

The output appears as

Screenshot:webpackerror

The following line runs fine.

npm start

I also have webpack setup fine on the same machine for a different project.

Does anyone know how to properly configure webpack for create-react-app?

Solution

  • npm start does the HMR for you out-of-the box. It will host your application using webpack-dev-server --hot itself. You just need to hook the HMR code to tell webpack what to watch and reload as necessary.

    This GitHub conversation offers a pretty decent simple solution for hooking HMR (https://github.com/facebookincubator/create-react-app/issues/2317) with and without Redux.