Loader

webpack默认只识别js代码，其他的资源文件是不支持的。为了能够支持这些文件，我们需要适当的loader来对这些文件进行处理。

例如，处理css的css-loader和style-loader；

注意，多个loader是从后往前执行，所以先需要执行的要放到后面，例如css-loader

使用loader前要先安装。具体有哪些loader可以查看下面的链接

loader

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

url-loader

有些小体积资源可以直接以data URLs的形式存在。这种资源，在文件中已经有了所有数据，无需发送请求。

由于这种文件会将文件数据存入js中，会导致体积变大，所以适用于小型资源使用。

url-loader对设置限制以下的，使用url-loader的方式打包，超出的仍使用file-loader打包。所以使用url-loader的同时也要安装file-loader。

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024
          }
        }
      }
    ]
  }
}

归纳

所以loader基本可以分为三类：

• 编译转换类，例如css-loader编译成js
• 文件操作类，例如file-loader将资源文件拷贝到输出目录
• 代码检查类，例如eslint-loader规范代码