定义Webpack加载的三种方法

Webpack loaders 执行相反的多少操作(从右到左的字符串时,基层当数组),最后加载器返回的Javascript。

一旦过去,接下来的实现细节处理写查询参数配置每个加载程序,显得很笨拙。

写在一行的查询字符串

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded',
      },
    ],
  },
}

查询字符串数组

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css',
          'autoprefixer?browsers=last 2 version',
          'sass?outputStyle=expanded',
        ],
      },
    ],
  },
}

细化的查询字符串数组：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style',
      },
      {
        test: /\.scss$/,
        loader: 'css',
      },
      {
        test: /\.scss$/,
        loader: 'autoprefixer',
        query: { browsers: 'last 2 version' },
      },
      {
        test: /\.scss$/,
        loader: 'sass',
        query: { outputStyle: 'expanded' },
      },
    ],
  },
}

就我个人而言,我更喜欢最后的版本,因为它更容易构成一连串的压缩器和加载器配置复杂的查询。