webpack怎么引入loader

在 webpack 中，可以通过配置 module.rules 来引入 loader。

例如，如果你想在打包过程中使用 babel-loader 来转换 ES6 代码，你可以这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有 .js 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader', // 使用 babel-loader
          options: {
            presets: ['@babel/preset-env'] // 配置 babel 的预设
          }
        }
      }
    ]
  }
};

这个配置告诉 webpack，在匹配到所有 .js 文件时，使用 babel-loader 来转换这些文件，同时排除 node_modules 目录。使用 options 配置项来设置 babel 的预设。

可以根据需要配置多个 loader，例如，如果你还想在打包过程中使用 css-loader 和 style-loader 来处理 CSS 文件，你可以这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/, // 匹配所有 .css 文件
        use: [
          'style-loader', // 将 CSS 代码插入 HTML 中
          'css-loader' // 处理 CSS 文件
        ]
      }
    ]
  }
};

这个配置告诉 webpack，在匹配到所有 .css 文件时，使用 style-loader 将 CSS 代码插入 HTML 中，然后使用 css-loader 处理 CSS 文件。注意，use 配置项中的 loader 数组的顺序很重要，webpack 会按照数组中的顺序依次调用这些 loader。