webpack基础——loader，以url-loader为例

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
    index: path.join(__dirname, './src/js/index.js'),
    sub: path.join(__dirname, './src/js/sub.js')
  },
  module: {
    rules: [
      {
        test: /.jpg$/,
        use: { //打包图片，可以配置很多，具体看官网
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',  保持原图片名字，保留原图片后缀，此处还有个 [hash] 可选，图片打包后会生成一个hash名字；如'[hash].[ext]'，不配置默认是hash
            limit: 2 * 1024，  //表示2kb以下的图片转换成base64格式，其它都是通过网络请求获取，如果没有该项，所有图片转换成base64
            outputPath: 'images/' //打包到dist/images/下面；没有该项就存在dist下
          }
        }
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join('./src/html/index.html')
    }),
    new CleanWebpackPlugin()
  ]
}

loader得解顺序是从下往上

比方说要解析scss得时候就要这样写

module: {
    rules: [
      {
        test: /.scss$/,
        //先经过scss处理=》css处理=》style处理
        use: [
            'style-loader',
            'css-loader',
            'scss-loader'
        ]
     }
}