wepack4核心概念之Loader

什么是Loader?

我们先看一下webpack官方文档的解释：

我们看到loader是用于对模块的源代码进行转换，模块就是要打包的文件如js、css、图片等。webpack不能是识别非js结尾的模块，那么我们要让webpack去识别就要用到loader了。

Loader(file-loader)打包相关的配置

先看下一下要打包的文件，我想打包这个js文件，但是webpack并不能识别引入的jpg格式的文件。那么需要引入一个file-loader来帮助webpack识别jpg文件：

这是file-loader在webpack中的配置：

解释一下:当webpack打包模块不知道怎么办时就会去看配置文件中的module，rules就是规则，其中的test就是要匹配到的文件后缀名，其中有file-loader会帮助打包的jpg文件。options是file-loader的可配参数,其中name就是打包出来的文件名，[name][hash][ext]这些是占位符,[name]:原始文件的名字、[hash]：内容的哈希值、[ext]：原始文件的拓展名。ouputPath：表示在dist目录里的images文件中。
然后执行webpack --config webpack.config.js在dist目录生成了如下文件：

这个就是我利用webpack打包生成的js文件，将这个文件引入一个html里就能看到图片了。
分析整个过程就是：一开始先在js文件里引入了jpg图片，然后想用webpack打包js文件，可是webpack并认识jpg文件，那只好在webpack配置文件里加入了file-loader来帮助webpack识别jpg文件。当使用webpack --config webpack.config.js命令时webpack就会去配置文件去寻找entry属性，这个属性里放的是打包的入口js文件，然后在入口js文件里发现引入了jpg文件，再去配置文件里寻找file-loader的配置。最后执行命令，打包出的文件放在dist/images目录下。

url-loader

url-loader的功能跟file-loader差不多，只不过url-loader可以把打包的文件转成base64编码放入生成的文件中去。

url-loader在webpack中的配置:

在options属性里新增了limit参数，这个参数的值为204800，它的作用会在下面说明，先来看打包后的文件：

我们看到只有一个bundle.js文件生成了，其中图片文件已经转为Base64编码放入bundle文件中了，这样做的好处是节省一次http不用去请求图片了，坏处就是这个js文件会变大，请求js文件的时间会增加。那么这时候limit参数就可以发挥作用了。limit:204800其中表示2kb，意思是对于2kb以内的文件会转成base64，2kb以上的文件就打包到dist/images目录下了。

css-loader、style-loader、sass-loader、post-loader

loader的执行顺序是从左到右，从上到下。
css-loader：帮助理清css文件之间的关系最终合并成一段css代码；
style-loader：得到合并后的css代码之后，会把这段代码放到html页面的head标签里面； sass-loader：将sass编译成css; post-loader：将sass编译好的css用autoprefix插件加入浏览器厂商前缀； 其中的css-loader有个局部作用域属性modules如图：

这个属性可以设置引入css的作用域，代码如下：
创建一个createAvatar.js文件和avatar.scss文件

import avatar from './avatar.jpg';

function createAvatar() {
  var img = new Image();
  img.src = avatar;
  img.classList.add("avatar")
  var root = document.getElementById('root');
  root.append(img);
}

export default createAvatar

.avatar {
  width: 150px;
  height: 150px;
  transform: translate(100px,100px);
}

将createAvatar.js引入index.js文件

import avatar from './avatar.jpg';
import style from './index.scss';
import createAvatar from './createAvatar.js'

createAvatar() 

var img = new Image();
img.src = avatar;
img.classList.add(style.avatar)
var root = document.getElementById('root');
root.append(img);

在页面上创建了两个image其中一个的class是通过img.classList.add("avatar")这种形式加入，另一种是img.classList.add(style.avatar)通过引入css module使得只有这个image才有avatar类名。这种方式就避免了css全局生效。