多個文件導入loader處理

// 文件base.css
@import './base.css';

// 文件login.css
.title {
    color: red;
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1 // 工作時找到其其它css，讓前1個的loader取處理
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                // require('autoprefixer'),
                                'postcss-preset-env' // 這是個工具包集合，包括autoprefixer
                            ]
                        }
                    }
                }]
            }
        ]
    }
  };

分析

module中rules的use執行順序是從后往前執行
處理base.css：

1. postcss-loader通過postcss-preset-env插件對base.css進行加前綴等兼容處理
2. 執行css-loader發現@import引入的文件，importLoaders: 1交給前面一個loader（postcss-loader）處理
   // css-loader可以處理 import / require的文件， 得到樣式的數組
3. style-loader 將樣式處理得到style標簽

處理import/require引入的圖片

import importImg from '../assets/xx.png' // import導入

function packageImage() {
    // let img = require('../assets/xx.png').default // require導入
    return `
    <img src="${importImg}" />
    `
}

document.body.innerHTML += packageImage();

  module.exports =  {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        esModule: false // 不轉為esModule
                    }
                }
            }
        ]
    }
  }

處理 css中background-image引入的圖片, 并自定義打包后的名稱及存放路徑

// /src/css/image.css
.bg {
    background-image: url(../assets/xx.png);
    background-size: cover;
    width: 200px;
    height: 400px;
}

// /src/js/login.js
import '../css/login.css'

function login() {
    return `
    <div class="title">login-title</div>
    `
}

document.body.innerHTML += login();

  module.exports =  {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1, // 工作時找到其其它css，讓前1個的loader取處理
                        esModule: false
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                // require('autoprefixer'),
                                'postcss-preset-env' // 這是個工具包集合，包括autoprefixer
                            ]
                        }
                    }
                }
                
            ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        esModule: false, // 不轉為esModule
                        name: '[name].[hash:6].[ext]', // 保留原文件名name，加上6位文件hash，ext后綴
outputPath: 'img' // 存放路徑
                    }
                }
            }
        ]
    }
  }

處理.txt文件

// file.txt
file123

// webpack.config.js
  module.exports =  {
    module: {
        rules: [
            {
                test: /\.txt$/i,
                use: {
                    loader: 'raw-loader',
                    options: {
                        esModule: false
                    }
                }
            }
        ]
    }
  }

url-loader處理圖片

      module.exports =  {
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    use: 
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false, // 不轉為esModule
                            name: '[name].[hash:6].[ext]', // 保留原文件名name，加上6位文件hash，ext后綴
                            outputPath: 'img', // 存放路徑
                            limit: 25 * 1024 // 大于25字節不做處理
                        }
                    }
                }
            ]
        }
      }

處理less

module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 1 // 工作時找到其其它css，讓前1個的loader取處理
          }
        },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  // require('autoprefixer'),
                  'postcss-preset-env' // 這是個工具包集合，包括autoprefixer
                ]
              }
            }
          },
          "less-loader"
        ]
      }
    ]
  }