webpack打包外部库 webpack 打包库

vue-cli的css是怎么打包的

我想了解一下以上这些概念的关系，我用过gulp，webpack应该是类似的工具吧。

webpack原理和机制

1.webpack核心概念 entry: 一个可执行模块或库的入口文件。 chunk :多个文件组成的一个代码块,例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。

loader ：文件转换器，例如把es6转换为es5，scss转换为css。

plugin ：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。...

webpack原理解析

1.webpack核心概念：

entry： 一个可执行模块或库的入口文件。

chunk ：多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。

loader ：文件转换器，例如把es6转换为es5，scss转换为css。

plugin ：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。

2.webpack构建流程（原理）：

从启动webpack构建到输出结果经历了一系列过程，它们是：

2.1 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。

2.2 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。

2.3 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。

2.4 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。

2.5 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。

2.6 输出所有chunk到文件系统。

webpack和webpack cli区别

Webpack 是一个现代化的 JavaScript 应用程序的模块打包工具，它将所有的资源（例如 JavaScript 文件、CSS 文件、图片等）视为模块，并将它们打包成一个或多个静态资源文件。Webpack 可以根据应用程序的需要进行自定义配置，以便于开发者能够高效地构建和部署应用程序。

Webpack CLI 是 Webpack 的命令行工具，它提供了一组命令，用于在命令行中执行各种与 Webpack 相关的任务，如启动开发服务器、构建代码、生成打包报告等。Webpack CLI 还提供了一些选项和参数，用于配置和优化 Webpack 的打包过程。简而言之，Webpack CLI 是一个用于与 Webpack 进行交互的命令行工具。

总结起来，Webpack 是一个模块打包工具，用于将应用程序的各种资源打包成静态资源文件，而 Webpack CLI 是一个与 Webpack 进行交互的命令行工具。