webpack4的安装

前言：

在学习webpack之前建议去学习node、npm、【sass、less、scss】系列、es6等，下面的一些npm命令若不太明白可以查看npm i -D和-s及-g以及--save的那些事

请确保安装了 Node.js 的最新版本。而且已经在您的项目根目录下已经初始化好了最基本的package.json文件，如果没有，请先按照下列步骤操作

mkdir webpack4  #创建一个webpack4为名称的空文件夹
cd webpack4  #进入webpack4 文件夹

F:\git\webpack4>node -v  #查看node版本，确定node是否安装
v8.10.0

F:\git\webpack4>npm -v #查看npm版本，确定npm是否安装
5.6.0

F:\git\webpack4>npm init -y #初始化package.json文件
Wrote to F:\git\webpack4\package.json:
{
  "name": "webpack4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

本地安装 webpack （开发环境需要的依赖）

npm install --save-dev webpack  #或者 npm i -D webpack

# 如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli

F:\git\webpack4>npm install --save-dev webpack
npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, lstat 'F:\git\webpack4\node_modules\fsevents\node_modules'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.35.0
added 324 packages in 69.024s

F:\git\webpack4>npm install --save-dev webpack-cli
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@3.3.5
added 63 packages in 38.342s

image.png

安装完成后，可以添加npm的script脚本

// package.json
"scripts": {
    "start": "webpack --config webpack.config.js"
}

全局安装 webpack（不推荐)

将使 webpack 在全局环境下可用：

npm install --global webpack

注意：不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。