码迷,mamicode.com
首页 > Web开发 > 详细

webpack学习(三)配置loader

时间:2019-06-08 01:05:19      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:文件中   相关   直接   module   配置   并且   因此   pac   图片   

首先搞清楚两个问题:

1 什么是loader?

2 为啥要用各种loader

答:

loader 就是各种打包规则,为什么要用是显而易见的,因为webpack还没智能到给它什么文件都能打包,对于js文件是完全ok的,

但是对于一些图片 .png .jpg .gif .vue等文件它并不能打包,直接打包肯定报错。因此需要制定一些对应的规则来告诉webpack如何

去打包。

如下图是关于图片的打包配置:

技术图片

上图中增加module对象,对象中的rules是一个数组,说明可以定义很多条规则。

方法:使用什么loader先去官方查阅文档,一般是下载该loader和相关的loader,然后在rules中使用它。必要时带一些参数(按需)。


再比如我们要在项目中使用 .scss文件编写样式。可以如下配置:

技术图片

值得一提的是 如果希望样式自动加厂商前缀,需要用到postcss-loader,并且需要配置一个postcss.config.js文件,文件中需要引入autoprefixer插件

所以需要下载并引入,如下图:

技术图片

 

以上便是loader的配置,还是那句话,项目中需要什么loader就配置什么loader,没有谁可以把所有loader都记住,因为太多太多了。

项目中需要的时候,查阅文档即可。

 

webpack学习(三)配置loader

标签:文件中   相关   直接   module   配置   并且   因此   pac   图片   

原文地址:https://www.cnblogs.com/yangboy/p/10989475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!