Web前端工程化（九） - 样式表中图片和字体颜色文件的loader加载器

准备学习Web前端工程化的内容，做个记录，以后需要的时候方便查找：

webpack只能打包处理.js相关的文件，其他资源可以使用插件的方式来曲线救国。

1 安装处理样式表中图片和字体颜色文件文件的loader，运行如下命令：

npm i url-loader file-loader -D 

2 在项目根目录中创建postcss的配置文件postcss.config.js，并开始如下配置：

module.exports = { 

        ......

        module : {

            rules:[

                        .......

                        // 方式 1

                         {  test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:"url-loader?limit=16940"  }

                        // 方法 2

                        { test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:["url-loader?limit=16940"] }

            ]

        }

    }

注意：

其中？之后的事loader的参数项

limit用来制定图片的大小，单位是字节byte，只有小于limit大小的图片，才会被转为base64的图片