Webpack installation

In this section we learn webpack4.0 installed, webpack running Node.js need to rely on the operating environment, installation webpack time will be needed by npm , so we need to install Node.js , Node.js comes with the package manager npm .

webpack needs the Node.js v0.6 or above, 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 go to the Node.js tutorial, here I won't show it to everyone.

Create a project

First, we need to create a project file, for example, create a xkd_webpack on the desktop, and then enter the root directory of this 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.json file will be automatically generated in the project root directory. This file contains some configuration information:

Some questions will be displayed during initialization. If we choose all the default answers for these questions, we can directly execute npm init --yes to directly create the package.json file.

The following is the content of a created package.json file:

{
  "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, one is global installation and the other is partial installation.

package.json field

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

• name: The name of the project. Note that it cannot start with a dot or underscore, cannot exceed 214 characters, and cannot contain uppercase letters.
• version: The version number, which is composed of the main version, this version, and the patch version, for example, 1.0.0.
• author: author.
• license: The license of the specified project, which can let people know the rights and restrictions of use.
• scripts: Script commands, a hash object composed of script commands, are executed in different life cycles of the package.
• description: The description of the item, string type.
• keywords: The keywords of the project.
• devDependencies: project dependencies.
• homepage: The address of the project's official website.
• bugs: The url and/or email address where the project submits the problem.

Install webpack globally

Global installation generally installs a tool, and installs the tool in a global environment instead of a folder. The global installation can be directly invoked anywhere in the command line. The two core basic modules of the webpack project are webpack and webpack-cli, which are the prerequisites for the construction of the webpack project.

If we have successfully installed Node.js, we can execute the following webpack global installation command:

npm install webpack webpack-cli -g

The effect of this command executed in the terminal is shown in the figure below:

Install webpack and install the webpack-cli tool at the same time. The function of installing webpack-cli is to enable the smooth execution of webpack packaging commands. After the execution is complete, the global installation of webpack is successful. In order to verify, we can use the webpack -v command to check whether the installation is successful. As shown in the figure below, the version number shows that the webpack installation is successful:

Generally, do not install the global webpack, because not all projects have the same version of webpack. If you start two or more projects, you will definitely encounter the problem that the project cannot be started because the versions are different, so 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

Partially install webpack

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

npm install webpack webpack-cli --save-dev

After the installation is successful, a package-lock.json file and node_modules folder will appear in the project root directory. The dependency packages we install through npm in the project later will be installed in the node_modules file by default. When using the installed module package, you need to introduce it into the project for use through require.

If you need to use webpack development tools, you must install them separately.

example:

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

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

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

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