Vue基础技术|webpack配置项目加载各种静态资源及css预处理器

webpack配置项目加载css文件

那么css-loader实际上它只是帮助我们处理了css文件，我们的css它是在我们的前端项目运行的时候它是要作为一个外部文件去处理的或者是我们要把我们的样式写到我们的html内容里面，作为一个style标签然后把里面的样式全部列出来，所以我们有不同的处理方式，所以我们的这种处理方式要怎么去声明它呢？那么我们的配置就要换一种模式不再使用loader而是改用use来编写配置信息了。

此时的css-loader作用实际上就是把我们的样式代码从css文件中读出来了，至于最终我们是要把它写到一个新的文件里面还是说我们要把它插入到我们的html文件里面，我们需要借助另外的loader帮助我们处理，我们首先使用帮我们写到html文件中的这种方式，我们需要借助style-loader来处理，这样我们写好的css最终会在js文件中以一段js代码的形式出现，这段js代码的作用是将我们的css写到我们的html文件里面去。

webpack配置项目加载图片资源

加载图片资源我们需要使用url-loader，我们发现在声明使用url-loader处理图片资源的时候，我们在use配置项中写的是对象，为什么使用对象形式呢？因为对象形式下我们可以为我们的loader指定一些选项配置，每一个loader它都会有一些选项可以配置，那么这些选项我们如何去配置呢？我们通过options参数来配置我们的loader选项，在这里面我们就可以把参数传给我们的loader来指定它的操作方式。url-loader它的作用可以帮助我们把图片转换成Base64代码，直接写在我们的js内容里面，而不用生成一个新的文件，那么对于一些小的图片比如几kb的这种小图片，它的作用是挺大的，因为它可以减少我们的http请求数，其实url-loader是对file-loader进行封装后的，file-loader的作用就是将图片读取一下然后进行简单的操作然后再把这个图片重新换一个名字，换一个位置把它存放起来。url-loader就是多做了一步，就是判断如果图片大小小于我们配置的limit大小，则将图片转换为Base64编码写到我们的代码里面去否则保持原来的图片。

安装已经配置好的loader

➜  vue-demo npm install style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6
npm WARN vue-demo@1.0.0 No repository field.

+ style-loader@0.19.1
+ url-loader@0.6.2
+ file-loader@1.1.6
added 5 packages from 7 contributors and audited 3863 packages in 4.802s
found 2 vulnerabilities (1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
➜  vue-demo

安装好这些所需的loader后呢，我们就可以在js代码中去import那些非js代码的内容了，赶快来试试吧！

编写样式文件代码

在打包入口文件里面引用样式文件资源、图片资源