（VueJs）图片文件处理Loader

官方文档

https://www.webpackjs.com/loaders/url-loader/

应用一下

首先安装url-loader

npm install --save-dev url-loader

结构：

main.js部分：引入css文件

require ('./css/normal.css');

css文件：

body{
    background: url("../img/picone.jpg");
}

webpack.config.js：新添加rules内容

 {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit规定的大小时，图片将会编译成base64字符串的形式
                            //当加载的图片大于limit规定的大小时，需要使用file-loader模块加载
                            limit: 21504
                        }
                    }
                ]
            }

演示：

当图片大小超过了限定的21504（1024*21）及超过21KB时：会使用file-loader对文件进行加载

file-loader部分：

安装file-loader

npm install file-loader --save-dev

不用file-loader时，将图片转化为base64的字符串进行处理；而如果用file-loader 进行处理，是需要对原图片进行打包，打包到dist文件夹中

重新build后可以看到dist文件夹中多了一张图片（即打包后的图片）
**注意：**这时候需要设置一下webpack.config.js文件：在output属性中添加
publicPath属性

    output:{
        //__dirname中保存的就是当前文件所在的路径，绝对路径
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath: 'dist/'
    },

这样file-loader在打包的时候url上会自动加上 dist/ 否则打包出来的url就会自动对齐index.html的路径下。

效果：