使用Loader打包静态资源下---补充

使用Loader打包—样式文件（下）importLoader

补充一点关于样式打包的内容，打开webpack.config.js这个文件，如果要给css-loader增加配置项，那么这里就不要字符串，而是写一个对象。这个importLoaders是什么东西呢？

假如我们写了一个scss文件，又在里面引入了一个额外的scss文件。在index.js中我们直接引入了index.scss这个文件

那么webpack打包的时候对于index.js里面引入的这个文件它会从下往上依次调用loader，但是它打包index.scss这个文件的时候，这里面又通过import额外引入了一个scss，那么这个时候你引入的scss打包的时候就不会走postcss-loader和sass-loader了，而是直接走css-loader了，那么如果我希望在index.scss文件中引入 的avatar.scss文件被打包的时候也走postcss-loader和sass-loader。那这个时候你在css-loader的配置项中importLoaders:2，意思就是你通过import 引入的scss文件在引入之前也要去走两个loader，这种语法就会保证无论你是在js中直接引入scss文件还是在scss文件里面再去引入其它的scss文件，都会依次从下往上执行所有的loader就不会有问题了。

css样式打包模块化

这个模块化和我们之前说的模块化不一样，首先我们删除掉index.scss中avatar.scss的引用，以及avatar.scss这个文件。
我们在src下面创建一个createAvatar.js文件，每次调用都会在页面增加一个图片

然后我们在index.js中引入这个函数，并调用

那么，页面上应该会有两张具有相同样式的图片

那么这里实际上想说的是，你在index.js文件中引入的样式，实际上影响到了另外一个创建图片的样式，这么去引入样式就相当于全局的，那么很多时候会产生问题：改这个文件的样式时候，一不小心，把另一个文件的样式也给改变了，很容易出现样式冲突的问题。这个时候我们就有了一个css module的概念。也就是模块化的css，在某一个模块中有效。那我们应该如何实现呢？

我们在css-loader中的配置项添加 modules:true，开启css的模块化打包

那我们改变index.js中的引入方式，并通过classList.add()的方式给图片添加样式

运行打包之后的html，我们看见第一个图片没有样式，而第二个图片是有大小和偏移样式的

这个时候添加的样式只对第二张图片有效，如果我们想第一张也有同样的效果
只需在createAvatar.js中引入同样的scss文件并添加相同的样式

再次打包后，我们可以看见，两个图片具有相同的样式

这中语法带来的好处是，我这个文件的样式和其它文件的样式不会有任何的耦合和冲突，这样的话我们写样式就非常的独立，可以避免很多问题

使用webpack打包字体文件

我们先整理一下文件，删除index.js中的内容
删除bundle下的image文件夹，bundle.js，src下保留以下文件

我们在index.js中写如下内容

我们现在想要实现的是在abc的位置放上第三方的字体，我们使用iconfont的字体图标做演示
在src下面新建font文件夹里面存放解压从iconfont下载部分的文件

把iconfont.css内容替换到index.scss内容

修改index.scss中引入文件的目录位置

在终端执行 npm run bundle 打包，然后你会发现报错，打包scss文件的时候，引入的四种字体文件，webpack并不知道该如何打包，所以我们应该在配置文件中告诉webpack该如何打包

我们可以借用file-loader来处理这写字体文件，
安装file-loader

cnpm install file-loader -D

执行 npm run bundle打包命令，运行html文件，浏览器上就会呈现一个字体图标

这就是如何通过webpack打包引入的第三方字体图标