importLoaders

作用

css文件中如果有@import 语句，importLoaders的作用是决定@import模块在使用css-loader前，要使用几个其它的loaders处理。importLoaders 只会对 @import 引入的 css 文件生效。

例子

我们先来构造 css 、 js、 loader 案例，在根目录下新建一个 loaders 文件夹。

|-src
|  |-index.js
|     |-index.css
|  |-other.css
|-loaders
|  |-loader1.js
|  |-loader2.js
|  |-loader3.js
|-webpack.config.js

/** ./src/index.js **/
import './index.css';

/** ./src/index.css **/
@import './other.css';
body {
  background: red;
}

.index {
  color: blue;
  transform: rotate(-45deg);
}

.orange {
  color: orange;
}

/** ./src/other.css **/
.other{
  color: green;
}

/** ./loaders/loader1.js **/
function loader(source){
  console.log(source);
  console.log('loader1');
  return source;
}
module.exports = loader;

/** ./loaders/loader1.js **/
function loader(source){
  console.log('loader2');
  return source;
}
module.exports = loader;

/** ./loaders/loader1.js **/
function loader(source){
  console.log('loader3');
  return source;
}
module.exports = loader;

/** ./webpack.config.js **/
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  devServer: {
    port: 8080,
    open: true,
    compress: true,
    static: './dist',
  },
  entry: {
    index: './src/index.js'
  },
  output:{
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[hash:8].js'
  },
  resolve:{
    alias: {
      '@':path.resolve('src')
    }
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use:[
          'style-loader',
          { 
            loader:'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'postcss-loader',
          path.resolve(__dirname, './loaders/loader1.js'),
          path.resolve(__dirname, './loaders/loader2.js'),
          path.resolve(__dirname, './loaders/loader3.js'),
        ]
      },
      {
        test:/\.(jpeg|jpg|png|gif)$/,
        type:'asset/inline',

      }
    ]
  },
  plugins: [
    new webpack.CleanPlugin(),
    new HtmlWebpackPlugin({
      filename:'index.html',
      inject: 'body',
      template:'./public/index.html'
    })
  ]
}

在这个例子中，我们设置了 importLoaders 为 2。
我们打包下看下结果

发现输出了 loader3，loader2，loader1，loader1。
前三个 loader 是在加载 index.css 时触发的。而最后一个 loader1 是 other.css 触发的，因为 importLoaders 设置为了2，所以只触发了 css-loader 之后的 postcss-loader 和 loader1。

接下来我们把 importLoaders 改成 3，结果如下：

other.css 触发了 postcss-loader 和 loader2 和 loader1。