这是我参与「第四届青训营 」笔记创作活动的的第6天

一、webpack 的介绍

webpack是什么

来自 webpack 官网的介绍

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

也就是之前我们写项目的文件的时候，其中有 HTML、CSS、JS 文件等，那么则需要通过手动的方式（如script、img等方式）去引入每个文件所引入的外部文件，当文件特别多的时候，很容易造成混淆，并且需要被复用的文件可能被多处调用使用，会影响整个项目的运行效率，也同样影响了代码的质量。

webpack解决的问题

Webpack 是前端资源的编译和打包工具，它提供了友好的前端模块化开发支持。将资源文件如 img、less、sass 等不同文件类型的依赖模块文件使用对应的 Loader 进行编译，转变成标准的 JS 内容。之后将编译好的内容打包成一个文件 bundle。然后通过 Webpack 打包便可生成以模块分类的包

二、loader 概述

loader 的作用

开发中我们不仅仅有基本的 js 代码处理，我们也需要加载 css、图片，也包括 一些高级的将 ES6 转成 ES5 代码，将 TS 转成 ES5 代码，将 scss、less 转成 css，将.jsx、.vue文件转成js文件等等。但 webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack 默认处理不了，所以我们需要 loader 的帮助

三、个人总结

这节课了解到 webpack 在我们的项目打包有着重要的地位，尤其是之前写过相关项目的文件引入问题，以及不同版本的使用方法需要对其进行重新编译，更能明白 webpack 产生的作用是巨大的。

学习要点：