webpack4.0-loader的使用-02

webpack是用于处理JavaScript的静态模块打包工具，当非js模块无法被打包的时候，要在配置文件的模块中使用loader

module: { // 模块
    rules: [{ // 打包的规则
      test: /\.jpg$/, // 正则校验 标识出被对应loader转换的文件
      use: { // 转换时使用的loader
        loader: 'file-loader'
      }
    }]
  }

使用loader打包静态资源（图片篇）

使用file-loader，file-loader一般用于处理字体文件

module: {
    rules: [{
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'file-loader',
        options: { // 该loader的配置项
          name: '[name]_[hash].[ext]', // 文件原名打包输出
          outputPath: 'images/' // 指定输出的文件目录
        }
      }
    }]
  }

// 用于处理字体文件
{
    test: /\.(svg|eot|woff|ttf)$/,
       use: {
         loader: "file-loader",
         options: {
           name: "[name]-[hash:6].[ext]",
           outputPath: "font/"
    }
  }
}

使用url-loader,功能和file-loader类似，当时在打包的时候可以控制通过打包文件的大小来确定打包方式

module: {
    rules: [{
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: { // 该loader的配置项
          name: '[name]_[hash:10].[ext]', // 文件原名打包输出 指定hash值的个数
          outputPath: 'images/', // 指定输出的文件目录
          limit: 20480 // 单文件小于20kb的时候打包到js文件
        }
      }
    }]
  }

使用loader打包文件（样式篇）

webpack只认识js文件,对于css模块还要配置相关的loader, style-loader、css-loader

{
    test: /\.scss$/,
       use: [
        "style-loader",
          {
            loader: "css-loader",
            options: {
            importLoaders: 2 // 可以在scss内部通过@import引入
            // modules 将css模块打包
          }
       },
      "sass-loader",
      "postcss-loader"
    ] // use可接受對象也可接受數組
 }