webpack5 loader

作用

webpack只会处理js、json文件，当需要处理其它类型的文件就需要添加对应的loader在使用require()/import语句时，先用对应的loader处理后，再加入打包后的boundle中

基本使用

test：匹配要处理的文件 /.txt$/：匹配任何以 .txt 结尾的文件“/.txt$/”： 匹配具有绝对路径 ‘.txt’ 的单个文件 use：添加处理的loader 同一个use中loader处理顺序为从右到左，从下到上

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

内联loader

使用 ! 将资源中的 loader 分开。loader加载顺序和上方相同传递loader参数使用?key=value&foo=bar或者{key":“value”,“foo”:“bar”}.

import Styles from 'style-loader!css-loader?modules!./styles.css';

为内联 import 语句添加前缀启动指定类型loader “!”禁止所有普通loader“!!”禁止preLoaders、loaders、postLoaders“-!”禁止preLoaders、loaders

import Styles from '!style-loader!css-loader?modules!./styles.css';
import Styles from '!!style-loader!css-loader?modules!./styles.css';
import Styles from '-!style-loader!css-loader?modules!./styles.css';