file-loader url-loader 图片图标

file-loader和url-loader都是用来处理图片、字体图标等文件

url-loader工作时分两种情况：

-当文件大小小于limit参数，url-loader将文件转为base-64编码合并到js文件里，用于减少http请求；

-当文件大小大于limit参数时，调用file-loader进行处理；

因此我们优先使用url-loader，首先还是进行安装，安装url-loader之前还需要把file-loader先安装：

npm i file-loader url-loader -D

接下来修改config：

{

    //省略其他配置

    rules: [{

        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,

        use: {

            loader: 'url-loader',

            options: {

                // 这里单位为(b) 10240 => 10kb              

                // 这里如果小于10kb则转换为base64打包进js文件，如果大于10kb则打包到对应目录

                limit: 10240,

                //生成资源名称

                name: '[name].[hash:8].[ext]',

                //生成资源的路径

                outputPath: 'imgs/'

            },

            exclude: /node_modules/,

        }

    }]

}

我们在css中给body添加一个小于10k的居中背景图片：

body{

    width: 100vw;

    height: 100vh;

    background: url(./bg.png) no-repeat;

    background-size: 400px 400px;

    background-position: center center;

}

打包后查看body的样式可以发现图片已经被替换成base64格式的url了，代码在demo4。

base64

---

file-loader

用于处理文件类型资源，如jpg，png等图片。返回值为publicPath为准

file-loader