【webpack 系列】基础篇

## Webpack 基础篇 ### 基本概念 `Webpack` 是一个现代 `JavaScript` 应用程序的静态模块打包器。当 `webpack` 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 `bundle`。 ### 四个核心概念 1. 入口(Entry): 构建 `Webpack` 内部依赖图的入口模块 2. 输出(Output): 输出 `Webpack` 打包好的 `Bundles` 3. Loader: 加载器，`Webpack` 原生只能解析 `JavaScript` 文件，`Loader` 让 `webpack` 拥有了加载和解析非 `JavaScript` 文件的能力。 4. 插件(Plugins): 扩展 `Webpack` 的功能，让 `Webpack` 具有更多的灵活性。在 `Webpack` 运行的生命周期中会广播出许多事件，`Plugin` 可以监听这些事件，在合适的时机通过 `Webpack` 提供的 `API` 改变输出结果。 ## Webpack 基础配置 ### 初始化项目 新建一个文件夹 `webpack-demo`，在该目录中使用 `npm init -y` 进行项目初始化。 ``` mkdir webpack-demo && cd webpack-demo npm init -y ``` 运行以下命令安装最新版本或特定版本 ``` npm i -D webpack npm i -D webpack@