Webpack4(二) loader入门

loader 概念

loader 就是 当 webpack 需要加载不同类型的文件需要提供的支持,比如 图片 css 之类的

他有两种 第一种是 file-loader 第二种是 url-loader

file-loader

(1) 修改 webpack.config.js 里面的文件

首先在 webpack.config.js 里面修改

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.jpg$/,
        use: {
          loader: 'file-loader',
        },
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(2) 安装 file-loader 模块

• 安装
  shuchu

cnpm i file-loader -D

(3) 打包后我想把图片维持原先的名字

• [name] 为了占位 [ext] 是后缀名

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.jpg$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
          },
        },
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(4) 有的时候打包后的名字里面我还想加入 hash 哈希值来区分

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.jpg$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
          },
        },
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(5) 打包有的时候图片格式是 jpg|png|gif 的 所以需要修改 webpack.config.js

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
          },
        },
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(6) 打包有的时候我想把图片统一放到一个文件夹里面

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
          },
        },
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

url-loader

url-loader 和 file-loader 使用差不多

唯一的区别就是 url-loader 会把图片打包进 main.js 里面

不在拿出来

(1) 修改 webpack.config.js

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
          },
        },
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(2) 安装 url-loader

cnpm i url-loader -D

(3) 修改 webpack.config.js 配置

• 加入了 limit 也就是超过 2048K 就不打包

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}