Installation guide for webpack Xiaobai

Webpack installation guide

Because most Xiaobai always stepped on various pits when contacting webpack, so. This article will show you how to install webpack

During this process, you may encounter some errors that are not covered in this article. You can refer to the three aspects to check for unsuccessful installation

1. Prerequisites

Before starting, make sure you have the latest version of Node.js installed

Because of the wall, it may lead to npm installthe phenomenon that everyone is stuck at the time, so I suggest you configure it first.

There are currently two methods, one is to install the cnpm mirror, and the other is to use a proxy. The former may encounter some new problems, so this article recommends the second method. Open the cmd command window and enter the following command

npm config set registry https://registry.npm.taobao.org

Subsequent commands such as install still operate through npm, not cnpm.

2. Install webpack

• Local installation

  npm install --save-dev webpack
  # 或指定版本
  npm install --save-dev webpack@<version>
  

• Global installation

  npm install --global webpack
  

I suggest global installation here, mainly for the convenience of Xiaobai’s learning. If the version encounters problems in some projects in the future, uninstall it for local installation.

3. Install webpack-cli

When you complete the previous step, the webpack -vfollowing problem prompts may appear when viewing the version through the command :

The prompt indicates that it must be installed webpack-cli, don’t worry, enter y and press Enter to install automatically

Some friends may still encounter new problems at this step, as follows:

Because we are installing in the cmd command window, we will be prompted with a hint that can’t be found. Don’t worry about this. It’s similar to the webpack installation, just install it globally.

npm install webpack-cli -g

After the installation is complete, check the version again:

4. Configure the packaging mode

After completing the previous steps, you can package, but the packaged main and js are displayed in a single line, which is not convenient to read, and there will be warnings:

It’s not difficult to know if you look at its prompt carefully, because the mode is not configured.

Don’t worry, we have a new file, the file name is webpack.config.js, the configuration is as follows, probably means to tell webpack, we want the production environment

module.exports = {
	mode: 'development'
}

Here it is almost the same. I hope everyone can install webpack smoothly. If there is any problem with this method, please point out.