01-初识webpack

webpack是什么

webpack是一个静态的模块化打包，为现代JavaScript应用程序。

• 打包bundler：webpack可以帮我们进行打包，所以它是一个打包工具。
• 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
• 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
• 现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

webpack与webpack-cli

1.webpack的安裝目前分为两个：webpack、webpack-cli（非必须安装，webpack-cli会读取webpack.config.js的内 容然后进行解析，再传入webpack，vue有自己的实现）。

2.webpack和webpack-cli的关系：

• 执行webpack命令，会执行node_modules下的.bin目录下的webpack；
• webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
• 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
• 所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于 自己的vue-service-cli的东西）

核心概念

• Entry:入口， Webpack 行构建的第一步将 Entry 开始，可抽象成输入。
• Module ：模块，在 Webpack 切皆模块，一个模块对应一个文件。 Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk ：代码块，一个chunk 多个模块组合而成，用于代码合并与分割。
• Loader ：模块转换器，用于将模块的原内容按照需求转换成新内容。
• Plugin ：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑，来改变构建结 果或做我们想要的事情。
• Output ：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

Webpack 在启动后会从 Entry里配置的 Module 开始，递归解析 Entry 依赖的所有 Module 。每找到一个 Module ，就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后， 再解析出当前 Module 依赖的 Module 这些模块会以 Entry为单位进行分组，Entry及其 所有依赖的 Module 被分到一个组也就是 Chunk 。最后， Webpack 将所有 Chunk 转换成 文件输出。在整个流程中， Webpack 会在恰当的时机执行 Plugin里定义的逻辑。