webpack4.0 配置loader打包静态文件（图片篇）

一般有两种方式：

• file-loader
• url-loader

yarn add file-loader url-loader -D	//yarn方式先下载包
npm i file-loader url-loader -D 	//npm方式
……
module: {
   rules: [{
       test: /\.(jpg|png|gif)$/,    //对以jpg|png|gif图片的后缀进行打包，仅对于 background-image的图片有效
       use: {
         loader: "url-loader",   //file-loader
         options: {
           name: "[name]_[hash].[ext]",
           outputPath: "images/",
           limit: 2048   //url-loader的属性
         }
       }
    }]
 }

当loader属性为file-loader时，webpack会把这个打包成一个以options的name属性值为图片名称的图片，并放在images文件夹下；无论这个图片的尺寸。
如: test.png => test_ksjdfkasdfasdf234dsasdfkdnsa.png

当当loader属性为url-loader时；并且有limit属性时；
若图片超过2kb（2048）时，则图片以base64的形式进行展示，若没有则以file-loader的方式进行打包处理
注意base64 若对大图片进行处理，base64会非常的长，反而不利于优化。

注意：url-loader 依赖于file-loader，
仅列举了options常用的属性，若有其他需求请参考npm url-loader。

若有img标签src路径形式的图片，请参考以下两个插件，哪个都不错。

1. html-withimg-loader

2. copy-webpack-plugin