七、webpack3.x之loader配置

webpack中的配置文件webpack.config.js进行loader配置。loaders的作用、安装、功能、配置、样式相关loader配置、图片相关配置，file-loader和url-loader等。

module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。

例如：

module: {
        rules: [
            {test: /\.less$/, 
               use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader", options: {
                        strictMath: true,
                        noIeCompat: true
                    }
                },{loader: "postcss-loader"}]  //厂商前缀
            }
          ]
}

（1）loaders作用

• 它告知 webpack 每一种文件都需要使用什么加载器来处理。
• 将各种文件类型转为webpack可识别的js文件类型。

（2）loaders安装

• 所有的加载器都需要通过 npm 来加载
• 例如：cnpm install less-loader —save-dev

（3）loader 功能

• loader 管道：在同一种类型的源文件上，可以同时执行多个 loader ， loader 的执行方式可以类似管道的方式，管道执行的方式是从右到左的方式loader 可以支持同步和异步
• loader 可以接收配置参数
• loader 可以通过正则表达式或者文件后缀指定特定类型的源文件
• 插件可以提供给 loader 更多功能
• loader 除了做文件转换以外，还可以创建额外的文件

（4）loader配置

• 一个loader配置如下：

{
    // 通过扩展名称和正则表达式来匹配资源文件
    test: String ,          
    // 匹配到的资源会应用 loader， loader 可以为 string 也可以为数组
    loader: String | Array
}

• 常用loader配置

  webpack 2.0

module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 less-loader 来编译处理
            { test: /\.les$/, loader: 'style!css!less?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }

webpack 3.0

 module: {
        rules: [{   
          test: /\.(png|gif|svg)$/,
          use: [{
            loader: 'url-loader',//转成base64格式图片
            options: {limit: 2000}
        }]},{
           test: /\.(jpg)$/,
           use: [{
             loader: 'file-loader',
             options:{name: 'images/[name].[ext]?[hash:8]'}
        }]}
 ]}

• 所有loader都可以配置以下项目：
  • test 用来对文件名进行匹配测试
  • exclude 被排除的文件名
  • include 包含的文件名
  • loader 叹号分割的loaders
  • loaders loader数组
• 安装loader
  • 注意所有的加载器都需要通过 npm 来加载，例如：npm install sass-loader –save-dev（具体见下章节）

（5）样式相关loader配置：

• style-loader：将css样式以style的方式加载到脚本文件中，样式起作用。

• css-loader：css文件可以直接作为模块加载到其他脚本文件中。

  • options.modules：true，将css文件作为局部变量。
    • css-loader：局部设置

• postcss-loader：兼容性，加厂商前缀。 需要新建一个配置文件，postcss.config.js

  module.exports = {
    plugins: [
      require('autoprefixer')({               //加厂商前缀
          browsers: ['Android 2.3','Android >= 4','iOS >= 6',
            'Explorer >= 6','Chrome >= 20','Firefox >= 24','Opera >= 12'],
          cascade: true,                  //是否美化属性值 默认：true 
          remove:true                     //是否去掉不必要的前缀 默认：true 
      })
    ]
  }
  

  ​

• less-loader：将less/scss文件转为css文件

  • strictMath，是否严格匹配
  • noIeCompat，是否不兼容ie
  • 注意顺序，从后往前 其他文件类型类似，例如：sass-loader、json-loader、svg-online-loader、mocha-loader、babel-loader。

（6）图片相关配置，file-loader和url-loader

• file-loader：文件加载器。url或其他文件，图片较大时的图片文件。
• url-loader：将指定格式的文件，转为base64格式图片。url限制在多少内的图片，转成base64格式的代码。一般用于有重复性的小图标。

详见【demo07-12】