上QQ阅读APP看书，第一时间看更新

Running webpack

The last step is adding scripts to our package.json file so that we can actually run our application via npm start.

Open package.json and find the scripts section, and replace it with the following:

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
},

Finally, we can run our project by executing the following command:

npm start

Then open http://localhost:8080/ in your browser. Open the Console to see the following hello world! message:

Output of our small project in the Console tab

In Chrome and Firefox, you can open the console by right-clicking on the web page and selecting Inspect or Inspect Element from the context menu. Then, select the Console tab in the developer tools pane that opened.

Later, when setting up a production environment, you might want to rename the current start script to start:dev and define the start script as follows:

"scripts": {
  "start": "npm build && serve dist",
  "start:dev": "webpack-dev-server",
  "build": "webpack"
},

serve is a simple NPM package/tool that hosts a small web server and serves all files from a certain directory. You first need to install it via
npm install --save serve.

Note that for all custom scripts (such as start:dev), you will need to run npm run start:dev instead of just npm start:dev.

If we need to have some server-side code, for example, to implement server-side rendering, the serve tool can be replaced with a custom web server. Server-side rendering will be covered in Chapter 10, Rendering on the Server.