webpack和Vue.config.js中配置url-loader

url-loader:一个用于将文件转换为 base64 URI 的 webpack 加载器。
作用：项目打包时，可以将符合条件的图片打包成base64 URL，减少http资源请求。
webpack配置：

const {resolve} = require("path")
module.exports =  {
  mode:"development",
  entry:"./index.js", //resolve(__dirname,"src","index.js")
  output:{
    path: resolve(__dirname,"dist")
  },
  module:{
    rules:[
      {
        test:/\.(png|jpg|jpeg)$/, //小于条件的图片采用base64。减少请求
        exclude:"/node_modules/",//但是排除node_modules里面的图片
        use:[
          {
            loader:"url-loader",
            options:{
              limit: 10*1024, //如果图片小于10k，就使用base64处理，
              esModule:false, // url-loader默认采用ES6模块语法  html-loader使用commonJs  所以这里需要关闭es模块语法即可
            }
          }
        ]

      }
    ]
  }

}

注意：在使用url-loader时，需要下载file-loader，因为url-loader的使用依赖于file-loader。

除了在webpack中配置外，开发Vue项目时，会发现vue.config.js这个文件里面也可以去配置，但是发现语法跟webpack不太一样。据我了解，里面包含了cli的部分语法，具体使用如下：

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}
const name = defaultSettings.title
const port = process.env.port || process.env.npm_config_port || 9527 // dev port
module.exports = {

   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  chainWebpack(config) {
      config.module.rule("images")
      .test(/\.(png|jpeg|jpg)$/)
      .use("url-loader")
      .loader("url-loader").options({
        limit: 1024*10,// 小于10k的图片采用baseurl，大于和等于8k的就正常打包成图片
        name:"static/[name].[ext]"//图片大于等于10k时，设置打包后图片的存放位置 name是文件名   ext是文件后缀
      })
  }
}