文章目录
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
