webpack4配置vue项目----5.加载图片等文件

这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

安装url-loader

url-loader是在file-loader的基础上进行封装，并且能对于设定 limit 大小的图片和字体文件，自动进行base64的转换；

npm install --save-dev url-loader

webpack.config.js配置

module.exports = {
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 10000,//以字节为单位，小于该大小的图片编译成base64
                    name:'images/[name]-[hash].[ext]',//所有图片打包到images目录
                }
            }]
        }]
    }
}