1 环境准备
1.1 安装git(可选)
1.2 安装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 webpack@4.6.0 -g
# 修改webpack版本 -- 局部
npm install --save-dev webpack@4.6.0
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;