1 环境准备

1.1 安装git(可选)

Git官网下载地址

Git安装步骤

1.2 安装node

Node官网下载地址

安装完成后，查看node版本

node -v

npm是随同node一起安装的包管理工具，安装完node以后，就可以直接使用了

安装淘宝镜像：使用cnpm 命令(可选)

npm install -g cnpm --registry=https://registry.npm.taobao.org

2 webpack准备

2.1 安装

# 如果是返回版本号，则已经安装过webpack；否则，就需要安装
webpack -v

# 全局安装webpack webpack-cli
npm install -g webpack webpack-cli 

# 局部安装 webpack webpack-cli
npm install webpack webpack-cli --save-dev
npm i webpack webpack-cli -D    # 简写

# 卸载
npm uninstall webpack -g

# 修改webpack版本 -- 局部
npm install [email protected] -g  

# 修改webpack版本 -- 局部
npm install --save-dev [email protected]  

2.2 初始化项目 npm init -y

一定是在项目的根目录

项目初始化完毕以后，会自动生成package.json文件；在这个文件里面可以查看各种依赖的版本号

npm init -y 
# 或者
npm init

2.3 局部安装webpack webpack webpack-cli

在项目的根目录下局部安装 webpack 和 webpack-cli

npm install --save-dev webpack webpack-cli
# 或者简化为下面的
npm i -D webpack webpack-cli

# 在wbepack4.X版本中，是需要安装 webpack-cli 的
# --save-dev可以简化为-D

2.4 创建配置文件

创建一个 webpack.config.js配置文件，由于webpack是基于node的，所以配置文件要遵循commonJS规范

2.5 项目运行

# 如果已经安装了 全局的webpack
webpack

# 如果咩有安装全局的webpack 
npx webpack

# webpack 监视模式
webpack --watch

# webpack devserver 服务器模式
npx webpack-dev-server

还可以通过配置 node scripts 命令直接运行项目

package.json

"scripts": {
    "serve": "webpack serve",
     "build": "webpack",
     "watch": "webpack -w"
},

然后，直接运行

npm run serve;
npm run build;
npm run watch;