webpack——文件和图片打包

file-loader

命名参数列表：

配置webpack.config.js如下：

运行webpack打包输出如下：

url-loader

url-loader 用法与file-loader相似，可以设置limit参数，当文件大小小于limit用url-loader打包，处理图片为BASE64的格式展示，打包后的文件变大，大于limit用file-loader打包。

优化webpack.config.js如下：

image-webpack-loader

1、安装 image-webpack-loader 压缩图片
2、优化webpack.config.js如下：

总结：使用三种文件图片打包结合使用，小图片采用base64的形式打包，大图片或文件采用url形式打包，同时image-webpack-loader将文件图片压缩打包。