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

以上文章来自:黄卉 , https://huanghui8030.github.io/webpack/loader.html