webpack-loader: loader的使用（图片、txt文件、url、less）

多个文件导入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"
        ]
      }
    ]
  }