对使用webpack过程中常用的loader做一个总结

webpack

更新

[2019-1-21]

Added

  • Initial release

[2019-4-26]

Changed

  • 更改文章title
  • 文章格式调整

一、css-loader

处理.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 0 | 1 | 2,  // postcss:1, postcss + less: 2,
      },
    },
  ],
},

二、style-loader

与css-loader结合使用, 将生成的css融合到style标签, 嵌入到页面上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader', },
        {
          loader: 'css-loader',
          options: {
            modules: true,   // 启动css模块化
          },
        },
      ],
    }
  ],
},
...

三、postcss-loader

与css-loader, style-loader结合使用, 其autoprefixer组件用来添加浏览器兼容前缀

1
2
3
4
5
6
7
8
9
10
11
{
  test: /\.css$/,
  use: [
    {
      loader: 'postcss-loader',
      options: {
        ...
      },
    }
  ],
}

四、autoprefixer

自动添加浏览器厂商前缀, 与postcss-loader结合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  test: /\.css$/,
  use: [
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('autoprefixer')({
            browsers: [xxx],
          }),
        ],
      },
    }
  ],
}