Hello, everyone! This is the second article in my webpack series. The last article introduced why we need to use Webpack. This article mainly explains the webpack environment construction, including: NPM node Webpack installation, students who have prepared the environment can skip, directly look at my next article.

Install nodejs

Log in to the NodeJS official website and select the LTS version to download and install nodeJS.

Nodejs version management

If you use a Mac or Linux OS, you are advised to use the N module of Node to manage node versions. If you use the Windows NVM to manage NodeJS versions, you are advised to use the N module of Node to manage NodeJS versions.

Nodejs package management tool

NPM is the most popular package management tool for NodeJS, and its counterpart is YARN. When we use NodeJS for development, we can package the written code and publish it to nPMjs.org, a javascript package management platform. When a project needs a package or module, You can directly use the package management tool to install the corresponding package. The package.json file in NPM is used as the description file of an NPM package, which contains the name, version number, description, author and other basic information as well as dependencies.

NPM common commands

Install and Delete

  • NPM install packageName NPN I packageName
  • NPM install packageName@

    Installs the specified version of the package. If there is a package.json file in the project directory, you can directly use NPM install to install all dependencies required by the project.
  • NPM install packageName –save short NPM I packageName -s Installs the dependency package and writes the dependency package to package.json.
  • NPM intstalll packageName –save-dev short NPM I packageName -d Installs the dependency package and writes it to the development dependency.
  • NPM uninstall packageName Deletes a dependent package.

Local mode and global mode

The NPM installation package is classified into local mode and global mode. The default mode is local mode. To install a global package, run the NPM install –global packageName NPM I -g packageName command

Initialize an NPM project

A new package.json file is generated by initializing a new project with the NPM init command. You can skip the question phase by using NPM init -y to generate a package.json file directly.

Set up an NPM image

NPM website is unstable, you can configure domestic mirror to solve this problem, Taobao NPM mirror is the largest NPM mirror website in China, you can set NPM to use Taobao mirror by default through NPM config set registery register.npm.taobao.org. You can also run the NPM install -g CNPM –registry=register.npm.taobao.org command to use CNPM as NPM.

Install Webpack and WebPack-CLI

It is recommended to install Webpack and webpack-CLI in the project directory. Global installation of Webpack and webpack-CLI is not recommended, because it can prevent conflicts caused by different projects relying on different versions of Webpack.

  • NPM I-D WebPack installs the latest stable version;
  • NPM I -d webpack@

    Install the specified version;
  • NPM i-d webpack@beta Install the latest version of the experience;

At this point, you have the command line development environment for WebPack, which I’ll cover next time with zero-configuration packaging for WebPack-CLI. Like radish radish without mud on the article attention!