说说webpack中常见的Loader？解决了什么问题？

定义

webpack: 分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

loader: 用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件。

在webpack内部中，任何文件都是模块，不仅仅只是js文件

默认情况下，在遇到 import 或者 require 加载模块的时候，webpack只支持对js 和 json 文件打包

像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析

关于配置loader的方式有三种：

• 配置方式（推荐）：在 webpack.config.js文件中指定 loader
• 内联方式：在每个 import 语句中显式指定loader
• CLI 方式：在 shell 命令中指定它们

配置方式

关于loader的配置，我们是写在module.rules属性中，属性介绍如下：

• rules是一个数组的形式，因此我们可以配置很多个loader
• 每一个loader对应一个对象的形式，对象属性test 为匹配的规则，一般情况为正则表达式
• 属性use针对匹配到文件类型，调用对应的 loader 进行处理

例子如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

loader的特性：

• loader 可以是同步的，也可以是异步的
• loader 运行在 Node.js 中，并且能够执行任何操作
• 除了常见的通过package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
• 插件(plugin)可以为 loader 带来更多特性 loader 能够产生额外的任意文件

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言翻译和更多其他特性

常见的loader

• style-loader: 将css添加到DOM的内联样式标签style里
• css-loader:允许将css文件通过require的方式引入，并返回css代码
• less-loader: 处理less
• sass-loader: 处理sass
• postcss-loader: 用postcss来处理CSS
• autoprefixer-loader:处理CSS3属性前缀，已被弃用，建议直接使用postcss
• file-loader: 分发文件到output目录并返回相对路径
• url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一Data Url
• html-minify-loader: 压缩HTML
• babel-loader :用babel来转换ES6文件到ES5