从0到上线开发企业级电商项目_前端_11_webpack对icon-font和图片的处理

在之前的文章中我们已经完成了webpack对于脚本、css、html的处理。

通过阅读本文，你可以解决以下几个问题：

• webpack如何处理图片
• webpack如何处理字体文件

一、webpack处理图片 url-loader

1. url-loader 安装

其实处理字体和图片，使用一个url-loader就可以了。

先安装一下loader

npm install url-loader –save-dev

显示安装成功，这里不用像之前去找包，因此不用理会WARN，那是告诉你npm 3不会安装所依赖的包。

2.url-loader 配置

在配置文件中使用url-loader，在module中的css-loader后面添加url-loader：

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader",
            "css-loader")
        },
        {
            test: /\.(gif|png|jpg)\??.*$/,
            loader: ‘url-loader’
        }

修改src -> page ->index ->index.css随便引入一张图片。

body{
    background: url(‘../../image/test-image.jpg’);
}

之后执行webpack我们看到执行结果

图片引入进来了，但是显示的是base64格式的，接下来我们使其显示图片名字，通过配置url-loader的参数可以实现这个功能。把之前的url-loader的配置进行修改

{
    test: /\.(gif|png|jpg)\??.*$/,
    loader: ‘url - loader ? limit = 100 & name = resource / [name]. [ext]’
}

参数说明：

limit:显示文件的大小，小于这个值就会被打包成刚才看到的base64的格式，而大于这个值的话就会以文件的形式进行打包，

&name=resource：并且把它放在resouce

[name].[ext]：文件的名字+扩展名，这样打包的话扩展名不会发生改变。

二、webpack对字体的处理

    前面已经提到了webpack对字体和图片都是使用我们刚才的url-loader来处理，

其实处理字体只要再加上几个字体的格式就可以了。加上woff|svg|eot|ttf即可：

{
    test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
    loader: ‘url - loader ? limit = 100 & name = resource / [name]. [ext]’
}

三、参考资料

1.webpack对icon-font和图片的处理