webpack 常见loader，解决了什么问题

webpack常见的loader：

是什么

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

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

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

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

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

在加载模块的时候，执行顺序如下：

当webpack碰到不识别的模块（文件）的时候，webpack会在配置中查找该文件解析规则

配置方式

关于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的特性

从以上代码可以看到，在处理css模块的时候，use属性中配置了三个loader分别处理css文件

因为loader支持链式调用，链中的每个loader会处理之前已处理过的资源，最终变成js代码。顺序为执行为反的执行顺序，即上述执行方式为sass-loader、css-loader、style-loader

除此之外，loader特性还有如下：

loader可以是同步，也可以是异步

loader运行在node.js中，能够执行任何操作

。。。

常见的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 文件到 ES