温情

Webpack本身功能比较少，只能处理js资源，一旦遇到其他资源就会报错所以我们学习Webpack，就是主要学习如何处理其他资源Webpack都通过文件进行配置，来增强Webpack的功能负责将 Css 文件编译成 Webpack 能识别的模块会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效负责将 Less 文件编译成 Css 文件负责将 Sass 文件编译成 css 文件。

样式需要加不同的浏览器前缀才能兼容对应的浏览器，因此在项目打包编译的时候，需要对。文件，配置css压缩前和配置css压缩后有很明显的变化。这样对于网站来说，可能会出现闪屏现象，用户体验不好。属性进行统一的兼容性处理。文件加载时，会创建一个。文件不处理会被打包到。我们应该要使用单独的。标签加载提高用户体验。

在开发阶段，遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：编写代码控制台运行命令完成打包打开页面查看效果并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境为了解决这些问题，webpack它既不是plugin也不是loader接下来看看它怎么用。

dist目录属于构建目录，是我们源码的输出目录，我们希望里面的一切都是可以自动化的，包括index.html文件也能自动创建，js文件也能自动引入到页面所以我们需要用到插件。

webpack默认处理了js资源, 为什么还要处理js资源这是因为浏览器无法识别es6语法，webpack默认只对js进行打包，不会将es6语法转换为es5语法供浏览器使用，所以需要我们自己配置，使es6语法转换为浏览器能识别的es5语法。

过去在Webpack4时，处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，只需要简单配置即可处理图片资源。

负责将 Css 文件编译成 Webpack 能识别的模块会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效负责将 Less 文件编译成 Css 文件负责将 Sass 文件编译成 css 文件sass-loader 依赖 node-sass 进行编译。

Webpack都通过文件进行配置，来增强Webpack的功能。

也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用。应该将打包好的文件输出到哪个目录，以及文件命名等, 默认为。多数插件可以通过选项(option)自定义。插件功能极其强大，可以用来处理各种各样的任务。能够处理的有效模块, 然后就可以利用。应该从哪个文件开始打包, 默认为。功能，打包优化、压缩代码体积等。可以将所有类型的文件转换为。可以去处理那些非js的文件。plugins 用于扩展。想要使用一个插件，只需要。操作符来创建它的一个实例。的打包能力正常进行打包。

Webpack本身功能比较少，只能处理js资源，一旦遇到其他资源就会报错所以我们学习Webpack，就是主要学习如何处理其他资源查看本系列文章合集click me下载本系列文章源码click me。