webpack-loader

在使用webpack的时候，总是要首先安装loader，但是为什么要安装loader？以及都有哪些类型的loader？

1、为什么要使用loader？　　

　　webpack 自身只理解 JavaScript（js结尾的文件），loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

 

2、日常安装的loader都有哪些？

　　css-loader：会理清多个css文件之间的引用关系，最后合并为一个之后加载css文件。

　　style-loader：会将css样式挂载到head的style标签中

　　sass-loader：将scss文件编译为css

　　file-loader： 帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；

　　babel-loader：负责将ES6、ES7代码转换成浏览器可运行的ES5的代码

 

3、样例

module: {
      rules: [
           {
               test: /\.js?$/,      // test字段表示匹配js结尾的文件
               exclude: /(node_modules|bower_components)/,      // exclude表示排除node_modules或bower_components这些文件夹
               loader: 'babel-loader',      // loader表示使用babel-loader
               query: {
                  presets: ['es2015', 'react'],    // presets字段设定转码规则,根据官方提供的规则集，你可以根据需要安装
                  plugins: [　　　　　　　　　　　　// 安装插件
                      ['import', {libraryName: 'antd', style: 'css'}]   //antd需要配置的地方
                  ]
                }
           },
           {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            }
       ]
 },