常用的Loader

1. style-loader

用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到第一位，因为loader都是从下往上执行，最后全部编译完成挂载到style上

2. css-loader

用于识别.css文件, 处理css必须配合style-loader共同使用，只安装css-loader样式不会生效。

3. sass-loader

css预处理器，我们在项目开发中经常会使用到的，编写css非常便捷。

4. postcss-loader

用于补充css样式各种浏览器内核前缀

5. babel-loader

将Es6+ 语法转换为Es5语法。

6. file-loader

用于处理文件类型资源，如jpg，png等图片。

7. url-loader

url-loader也是处理图片类型资源，只不过它与file-loader有一点不同，url-loader可以设置一个根据图片大小进行不同的操作，如果该图片大小大于指定的大小，则将图片进行打包资源，否则将图片转换为base64字符串合并到js文件里

8. html-withimg-loader

我们在编译图片时，都是使用file-loader和url-loader，这两个loader都是查找js文件里的相关图片资源，但是html里面的文件不会查找所以我们html里的图片也想打包进去，这时使用html-withimg-loader

9. vue-loader

用于编译.vue文件，如我们自己搭建vue项目就可以使用vue-loader

10. eslint-loader

用于检查代码是否符合规范，是否存在语法错误

配置方法

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
          "postcss-loader"
        ],
        include: /src/, 
      },
    ]
  }
}

相关文字讲解

分享12个Webpack中常用的Loader (opens new window)