[1] loader

一、是什么

Loader就是一个函数， 当webpack解析资源时，会调用相应的Loader去处理， Loader接受到文件内容作为参数，返回内容出去。

webpack是可以直接去处理javascript的代码，但是对于css、image、font等，是不能直接处理的，需要使用到loader将其转化成javascript代码片，然后在对其进行处理。

顺序

loader 本质上是一个函数，我们配置多个 loader 本质上就是先后调用多个函数，所以 loader 顺序配置错误可能导致潜在问题，得不到预期的输出。

怎么调整这个顺序很关键，但是如果你书写的时候已经排好了序，那就无所谓了，比如这样:

   module: {
        rules: [
            {
                test: /.scss$/,
                use: ['style-loader','css-loader', {
                    loader: 'sass-loader?sourceMap=true',
                    options: {
                        importer: require('node-sass-import-once')
                    }
                }]
            },
          ]
   }

loader处理顺序，默认是从下往上处理的，从右到左。

可以通过一个 enforce 属性来调整顺序，默认有以下几个值

1. pre 优先处理

2. normal 正常处理（默认）

3. inline 其次处理

4. post 最后处理

module: {
    rules: [
      {
        test: /.less$/,
        use: 'less-loader',
        enforce: 'pre'
      },
     {
        test: /.less$/,
        use: 'css-loader'
      },
     {
        test: /.less$/,
        use: 'style-loader',
        enforce: 'post'
      }
    ]
  },

我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。