webpack详细安装以及webpack.config.js配置，package.json配置

---

First Of All ！什么是webpack？

概念：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

理解：webpack 有2个核心：模块化 和 打包

模块化：

• 在 webpack 的思路中，不只是 JavaScript，图片、css、json等文件，都可以被当作模块来使用。

打包：

• 理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。
• 就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
• 并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成 ES5语法，将TypeScript转成JavaScript等等操作。

Secondly 需要了解这三者关系！

webpack、node、npm之间的关系
1.webpack想要能够正常运行，必须依赖node环境
2.在安装node的时候一般会帮我们安装一个工具，叫做 npm (node packages manager / node包管理工具)，这个工具只是为了帮助我们管理node环境下的各种包，比如依赖。

---

一、NodeJs安装

1.安装步骤

• 1、下载Node.js（点击此处跳转下载）

• 2、除了修改默认安装位置，其余一律next（下一步）即可（如无特殊需要，可以直接安装在C盘，但是建议选择另外的磁盘单独建一个文件夹来安装它）。

• 3、查看版本：

1.键盘 win+r ，以管理员方式运行cmd;  
2.输入node -v ，回车; 

• 4、环境变量配置

  此处的环境配置主要配置的是 npm 安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

  例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中（我的文件夹是nodejs），则在我的安装目录下创建两个文件夹【node_global】及【node_cache】

  4.1、设置全局目录和缓存目录，创建完两个空文件夹之后，打开cmd命令窗口，输入：

1、npm config set prefix "D:\nodejs\node_global"
2、npm config set cache "D:\nodejs\node_cache"

• 注意： “D:\nodejs\node_global” 这个是安装在D盘的情况下创建的文件夹路径，如果安装在其他位置，注意文件夹路径是否正确

  4.2、设置环境变量，win->搜索环境变量->编辑环境变量

  4.3、修改环境变量

  • 4.3.1、将【用户变量】下【Path】的【C:\Users\yao\AppData\Roaming\npm】修改为【D:\nodejs\node_global】

  • 4.3.2、在【系统变量】下新建【NODE_PATH】，输入【D:\nodejs\node_modules】

二、webpack安装

1.安装步骤

• 1、在你喜欢的磁盘下建一个你喜欢的文件夹（名字自定义，但是建议用英文或者英文+数字）用来存放我们的项目，以后我们的所有项目都可以放到这个文件夹里面，方便我们开发和管理，然后通过cmd进入这个文件夹

  * 1.1、第一种情况：如果你的文件夹建在C盘（没有跨磁盘），复制该文件夹的全路径，然后输入cd 你复制的路径，回车
  
  * 1.2、第二种情况：如果你的文件夹在其他磁盘，则先进入对应磁盘，然后找到我们的项目文件夹
  

   1、d:
   2、cd D:\work\实训课程\examples\web

• 2、创建一个名为 myWebpackProject 的文件夹（这个文件夹的名字是你自定义的），并且进入该文件夹

• 3、初始化文件夹

• 4、安装webpack和webpack-cli （webpack4.0+以后的版本，需要安装webpack-cli）

1、mkdir myWebpackProject && cd myWebpackProject
2、npm init -y
3、npm install webpack webpack-cli --save-dev

疑问：在这里，我们为什么不进行全局安装？

• 全局安装后，会造成多个项目依赖同一版本，但是有时候我们想要的是不同版本的，因此不推荐全局安装

2.webpack的基本使用

• webpack一般包含2个东西：src（开发文件）、dist（发布，全名 distrbution），那么我们先创建src来存放我们的文件

• 使用webpack打包

  • 1 键盘 win+r ，以管理员方式运行cmd;

  • 2 找到我们的文件夹

  • 3 在src下面新建一个index.js，随便写点代码

  • 4 打包：运行 npx webpack

    // npx是运行本地的webpack

    npx webpack
    

  • 5、执行完此命令后，多出了一个包含mian.js的dist文件夹，这就是webpack打包后生成的文件了

3.webpack的默认配置

• 默认入口模块
  • ./src/index.js (可以删除index.js换a.js在运行，会报错)
• 默认输出
  • 名称: main.js
  • 路径: ./dist
• webpack默认支持多种模块类型：比如commonJS、esmodule、AMD，这里我们使用的是commonJS
• webpack默认支持js模块和json模块（注意：在没有其他配置的情况下，webpack不认识非js模块）
  • css/img/text

三、webpack.config.js配置、package.json配置

1、package.json的配置

• 按照上面的打包方式，我们每次都要运行npx webpack，因此我们可以在package.json中添加scripts软链接
• 以下是package.json的配置：

{
  "name": "webpackday1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

• scripts：用于指定脚本命令，供 npm 直接调用，使用方式是：npm run xxx
  • 当我们设置 “scripts”: { “build”: “webpack” }, 就相当于我们执行了npx webpack,所以现在我们只需要执行npm run build
  • 配置了scripts之后，命令执行时，首先会在我们本地文件（当前项目）里去找webpack，如果本地没有，才会去全局找webpack
  • 我们常用的命令有 npm run dev、npm run serve、npm run build，dev和serve用来运行我们的程序，build用来打包
• devDependencies：开发时依赖，我们使用–save-dev安装时就会有这个配置

2、npm 配置淘宝镜像

• 原因：npm使用的是国外的包，下载速度慢，还会失败，所以这里我们配置一个淘宝镜像（cnpm：国内的npm）

1、安装cnpm

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

解释：

• 1、全局安装 cnpm
• 2、将各种包（依赖）的地址切换到 国内的淘宝镜像

3、附加

nrm 的使用：

• nrm可以让我们随意的切换镜像源（也就是我们下载包的地址）

• 使用nrm ls查看我们所有镜像的版本

• 切换镜像源：nrm use <源名>

1、cnpm i nrm -g
2、nrm ls
3、nrm use taobao