Webpack installation


In this section, let’s learnwebpack4.0Installation of,webpackThe operation of depends on node JS running environment, in the installationwebpackIt also needs to be usednpm, so we need to install it firstNode.jsNode.jsComes with package managernpm

webpackneedNode.js v0.6The above versions are supported, so it is recommended to use the latest version. The installation address is:https://nodejs.org/en/download/, if you are not familiar with the installation process, you can take a look at node JS introductory tutorial, I won’t show you here.

Create a project

First, we need to create a project file, such as one on the desktopxkd_webpack, and then enter the root directory of the project in the terminal, as shown in the following figure:

Then you can execute the NPM init command to initialize the project. At this time, a package will be automatically generated in the root directory of the project JSON file, which contains some configuration information:

Some questions will be displayed during initialization. If we choose the default answer for all these questions, we can directly execute NPM init — yes to directly create the package JSON file.

Here is a created package JSON file content:

  "name": "xkd_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC",
  "devDependencies": {

After initialization, you can start to install webpack. There are two ways to install webpack: Global installation and local installation.

package. JSON field

Let’s take a look at package The fields in the JSON file, name and version, are package The required fields in the JSON file together form a unique identifier.

  • Name: project name. Note that it cannot start with a dot or underscore, cannot exceed 214 characters, and cannot contain uppercase letters.
  • Version: version number, which is determined by the major version This version Patch version composition, such as 1.0.0.
  • Author: author.
  • License: Specifies the license of the project, which can make people know the rights and restrictions of use.
  • Scripts: script commands are hash objects composed of script commands, which are executed in different life cycles of packages.
  • Description: description of the item, string type.
  • Keywords: Keywords of the project.
  • Dev dependencies: project dependencies.
  • Address of the project: home.
  • Bugs: URL and / or email address of the project submission question.

Global installation of webpack

Global installation generally installs a tool, which is installed in a global environment rather than a folder. Global installation can be called directly anywhere in the command line. The two core basic modules of the webpack project are webpack and webpack cli, which are the premise of the construction of the webpack project.

If we have successfully installed node JS, you can execute the following webpack global installation command:

npm install webpack webpack-cli -g

The execution effect of this command in the terminal is shown in the following figure:

Install webpack and the webpack cli tool at the same time. The function of installing webpack cli is to make the webpack packaging command execute smoothly. After execution, the global installation of webpack is successful. In order to verify, we can check whether the installation is successful through the webpack – V command, as shown in the figure below. If the version number appears, it indicates that the installation of webpack is successful:

Generally, do not install the global, because not all projects have the same version of webpack. If you start more than two projects, you will encounter the problem that the project cannot be started due to different versions. Therefore, it is better to install it in this project.

The webpack command to delete the global installation is as follows:

npm uninstall webpack webpack-cli -g

Locally installed webpack

Local installation can also be called local installation. If we want to install webpack locally, we can execute the following commands:

npm install webpack webpack-cli --save-dev

After the installation is successful, a package lock will appear in the root directory of the project JSON file and node_ Modules folder. Later, the dependent packages installed through NPM in the project will be installed to node by default_ Modules file. When using the installed module package, it needs to be introduced into the project through require.

If you need to use the webpack development tool, install it separately.


For example, to install a webpack dev server, the command is as follows:

$ npm install webpack-dev-server --save-dev

At this point, the installation of our webpack is completed. In the next section, we will learn how to use webpack.

More links:https://www.9xkd.com/