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

 

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

 

经过阅读本文，你能够解决如下几个问题：

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

 

1、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]：文件的名字+扩展名，这样打包的话扩展名不会发生改变。

 

2、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]’
}

 

 

 

 

3、参考资料

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