webpack中，有哪些常见的Loader？他们是解决什么问题的？

[Cosen95]

webpack中，有哪些常见的Loader？他们是解决什么问题的？

[Cosen95]

file-loader

• 把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

rules: [{
  test: /\.(jpg|png|gif)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name]_[hash].[ext]',
      outputPath: 'images/',
    }
  }
}]

url-loader

• url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
• url-loader把资源文件转换为URL，file-loader也是一样的功能。不同之处在于url-loader更加灵活，它可以把小文件转换为base64格式的URL，从而减少网络请求次数。url-loader依赖file-loader。

rules: [{
  test: /\.(jpg|png|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name]_[hash].[ext]',
      outputPath: 'images/',
      limit: 204800
    }
  }
}]

css-loader

• 加载 CSS(不会将加载的css样式应用到html)

module: {
  rules: [
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }
  ]
}

style-loader

• 负责将css-loader加载到的css样式动态的添加到html-head-style标签中
• 一般建议将 style-loader 与 css-loader 结合使用

sass-loader

• 通过将 style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。

// 安装
yarn add sass-loader node-sass webpack --dev
// loader执行顺序：从下至上，从右至左
// webpack.config.js
module.exports = {
...
module: {
  rules: [{
    test: /\.scss$/,
    use: [{
        loader: "style-loader" // 将 JS 字符串生成为 style 节点
    }, {
        loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
    }, {
        loader: "sass-loader" // 将 Sass 编译成 CSS
    }]
  }]
}
};

postcss-loader

• webpack4中使用postcss-loader代替autoprefixer，给css3样式加浏览器前缀

// webpack.config.js
 {
  test: /\.scss$/,
  use: [
    'style-loader',
      'css-loader',
      'sass-loader',
      'postcss-loader'
    ],
}

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({ browsers: ['last 2 versions'] }),
    ],
};