qq_30764777的博客

一、Webpack loader简介Loader是Webpack生态里一个重要的组成，我们一般称之为预处理器。Webpack在进行打包的时候，对所有引入的资源文件，都当作模块来处理。但Webpack自身只支持对JS文件处理（现在的版本也支持对JSON文件处理），如果你引入了一个CSS文件或图片文件，那么Webpack在处理该模块的时候，会在控制台报错：Module parse failed…You may need an appropriate loader to handle this f

Webpack的安装分为全局安装与本地安装，上一篇我们使用的是本地安装，我们也推荐使用本地安装。那么全局安装的Webpack与本地安装的有何不同呢？全局安装的Webpack，在任何目录执行webpack命令都可以进行打包。而本地安装的Webpack，必须要找到对应node_modules下的webpack命令才能执行（在使用npx或package.json的scripts的时候，会自动帮助我们寻找）。那为何推荐本地安装呢？主要是考虑Webpack版本不一致的问题，看完下面的内容就更容易理解了。

前言：webpack入门系列主要参考了姜瑞涛的教程，内容深入浅出，作为入门教学，对webpack系统化学习十分有帮助，感兴趣的小伙伴可以去看一看姜瑞涛的官网。这里的文章主要是结合自己的操作，与可能面临的问题做的个人总结。前两篇文章已经分享了如何安装node环境与配置，以及利用vue-cli3来初步构建我们的项目，但vue-cli3内部高度集成了webpack，所以没有暴露webpack的配置文件，但项目上一般我们依然需要创建vue.config.js去修改默认的webpack，因此下面我们来系统学习