Webpack详解
什么是Webpack？
我们先看看官方的解释：
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具
但是它是什么呢？用概念解释概念，还是不清晰。
我们从两个点来解释上面这句话：模块 和 打包
image-20200610101233411
前端模块化
在前面学习中，我已经用了大量的篇幅解释了为什么前端需要模块化。
而且我也提到了目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。
在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到）。
这就是webpack中模块化的概念。
打包
理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。
就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。
Webpack的安装
image-20200610101801556
安装前先安装好node，并且配置好npm淘宝镜像
image-20200610101849834
image-20200610102223886
全局安装webpack。指定版本3.6.0npm install webpack@3.6.0 -g
image-20200610102359480
查看webpcak版本webpack -v
image-20200610102429162
Webpack的基本使用
编写一个info.js文件，使用es6模块化
image-20200610110123669
编写一个mathUtils.js文件，使用CommonJS模块化
image-20200610110241337
编写一个main.js文件使用这两个js文件
image-20200610110528686
导入js文件必须要加上./否则会从node_modules中寻找。js后缀名，使用webpack可以省略。
如果我们想使用的话则需要在index.html中引入main.js即可
image-20200610110810408
但是main.js文件中运用了CommonJS，直接引入使用，是不能正常使用的
image-20200610110910607
所有我们则需要把main.js文件给打包成浏览器能运行使用的js文件将ES6语法，CommonJS转成ES5语法。
在项目根目录中的命令行，我们使用webpack命令将main打包webpack ./src/main.js ./dist/bundle.js并且将main.js所使用的依赖(info.js，mathUtils.js)都打包
将./src/main.js文件打包到./dist/目录中并命名为bundle.js
image-20200610111448162
打包完成之后，我们的index.html只要引入打包后的bundle.js文件即可
image-20200610111734214
image-20200610111754095
Webpack的配置
我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
首先我们使用npm init初始化这个项目，生成package-json文件
image-20200610112702982
编写一个Webpack配置文件webpack-config.js
image-20200610112926483
入口起点(entry)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，我们将在下一章节详细讨论这个过程。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程
在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。
path必须是一个绝对路径,所以导入nodejs的核心模块path使用path.resolve(__dirname,'dist')方法将当前项目的绝对路径与dist目录拼接在一起
接着在当前根目录下输入webpack将main.js和有关依赖进行打包
image-20200610134620280
image-20200610134642753
image-20200610134656757
通过配置webpack的配置文件我们可以使用wepback就能对其打包了，虽然现在看起来还是很方便。但是到后面命令会变得更加复杂会带有更多的参数，所以每次都这样是十分繁琐的。所以我们要把命令与package.json中的scripts建立映射关系。
image-20200610135250154
我们与build建立映射关系。以后只要执行npm run build就相当于执行webpack命令进行打包
<mark>package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。</mark>
我们在命令行中输入的命令都是全局安装的命令
<mark>为什么要先去本地的node_modules找是否存在webpack呢？因为这样就可以避免当别人使用webpack打包时，它的版本如果和你存在较大差异。你在自己电脑上使用webpack打包他的项目就会出现报错。所以我们要安装一个局部的wepack</mark>
我们在项目的命令行中输入npm install webpack@3.6.0 --save-dev安装局部的webpack
这时候又要一个问题？为啥我们要--save-dev而不是--save?
--save保存的是运行环境依赖
--save-dev保存的是开发环境依赖
运行环境依赖是项目打包发布后还要所依赖的环境例如：jQuery，vue，axios...这些在会一起被打包发布出去dependencies
开发环境依赖就是一些文件在开发时使用的，比如一些webpack、gulp打包工具就放在开发环境中。项目打包发布后就是用不到devDependencies
image-20200610141257357
此外，当我们使用npm install时会下载dependencies和 devDependencies 下的模块。使用 npm install -production或者给定NODE_ENV值为production时，就只下载 dependencies下的模块。
image-20200610141658583
这时我们就可以通过npm run build运行我们局部安装的webpack运行我们的webpack命令通过配置文件指定打包入口，和文件输出目录和文件名。
image-20200610142015759
image-20200610142252669
