安装
现在学习的是 webpack4 的最新版，新建文件夹，npm init -y 初始化一下，然后执行下面命令进行安装，需要同时安装 webpack 和 webpack-cli。
npm install webpack@4.43.0 webpack-cli@3.3.12 -D复制代码
不建议全局安装 webpack， 因为全局安装会锁定版本，多个项目之间可能依赖的 webpack 版本不同， 所以还是建议项目内安装。
可以根目录下新建 .npmrc 文件，指定当前项目安装依赖的源地址
registry=https://registry.npm.taobao.org复制代码
webpack 的零配置
webpack 宣传的一个噱头就是零配置构建， 也就是什么配置都不写就可以进行打包，虽然确实是可以执行，但其实是满足不了实际开发需要的。
先来随便跑一下，新建 src/index.js 文件。我们在 index.js 中 只写一行
console.log("hello, webpack !")复制代码然后执行
npx webpack -v复制代码
npx 在当前项目下查找并启动 webpack 。可以看到根目录下生成 dist/main.js 文件。
建议在 package.json 文件中，添加构建命令，便于添加构建参数，也更加易读。
"scripts": { "dev": "webpack" },复制代码
虽然我只写了一行代码，但是打包出来却有这么多字符，看下面的进度条就知道后面还有很多了。
是因为 webpack 默认给做了很多兼容，这也是相对于其他构建工具，出现了很多的冗余代码。
但其实问题不大， webpack5 进行了一些优化，但是当模块变的越来越多时候，就没有什么太大改变了。
构建信息
看一下构建时都输出了什么信息
打包出来的文件内容有很多，但是主结构很简单，其实就是一个自执行函数,如下
(function(modules) {// todo})({ "./src/login.js": (function(module, exports) { eval（"xxxxx") })})复制代码在这个结构中，可以看到自执行函数的参数是一个对象，对象的每个 key 的 value 都包含一个 chunk，也就是 代码片段。
也可以包含多个 chunk ， 被称为 chunks， chunk组 ，还可以被称为 chunk Names 。
这一整个对象中可以包含多个 key：value，被称为依赖图谱。
构建后产生的资源文件， 称呼为 bundle 文件 。
几者遵循以下关系：
- 一个
bundle 对应至少一个chunks - 一个
chunks 对应至少一个module - 一个
module 对应至少一个chunk
一句话总结：
module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：
我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。
