webpack基础——loader的简单使用

当需要打包图片的时候

npm i file-loader  或者 url-loader
区别：
url-loader 更高级，可以更具图片的大小，选择打包的方式（转化成base64存在js里 / 转换成 url 通过网络请求获取）
当图片较小如1-2kb时放在js里可以减少请求次数，但图片过大时，转换成base64码存在js里会让js解析很长时间，体验不好，二者衡量

此处以file-loader为栗，只能转换成url格式

js里
import avator from '../asset/img/6.jpg'

const app = document.getElementById('app')
let img = new Image()
img.src = avator
app.appendChild(img)

webpack配置：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
    index: path.join(__dirname, './src/js/index.js'),
  },
  module: {  //重点在module
    rules: [
      {
        test: /.jpg$/,  //此处只提了jpg格式，还可以通过正则匹配各种图片格式
        use: 'file-loader'  //loader名字
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join('./src/html/index.html')
    })
  ]
}

各种可用的loader，极其可配置的参数