Webpack Loaders总览

2020-09-18  本文已影响0人  风向应该可以决定发型吧

环境: webpack4.44.1

终于趁着换档期,沉下心来重新研究下Webpack 5大核心模块,依然是4.x版本.

先研究Webpack中的各种常用Loader.

Webpack中的Loader可以帮助处理除了js以外的其他文件,如css/图片/字体/json等等.

Webpack中把所有东西都视为模块,所以加载所有内容的时候都会以各种Loader通过相应方式打包成模块,这些模块可以被import和require.

Loader的使用方法

在wepbakc中5大核心之一的 module内使用,如下:

module.exports = {
    ...
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'html-loader'
         },
        {
          test: /\.css$/, // 匹配css扩展名的文件
          use: ['style-loader', 'css-loader']
         } 
      ]
    }
    ...
}

单Loader和多Loader配置,以及options配置的写法

从数组末尾往前执行: 从右到左,从下到上

{ // 单Loader不带options配置写法
  test: /\.html$/
  loader: 'html-loader'
},
{// 单Loader 配置 options写法
  test: /\.(jpg|jpeg|png|svg|gif)$/,
  loader: url-loader,
  options: {
    limit: 8*1024,
    name: '[hash:10].[ext]',
    outputPath: './build/images'
  }
}

{ // 多Loader不带options配置写法
  test: /\.(sass|scss)$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
},
{ // 多Loader配置options写法
  test: /\.css$/,
  use: [
    'style-loader', 
    {
      loader: 'css-loader',
      options: {
        options: {
            modules: true 
          }
      }
    }
  ]
}

内联方式使用多Loader

{ // 多Loader不带options配置写法
  test: /\.(sass|scss)$/,
  loader: 'style-loader!css-loader!sass-loader'
},
// 在import语法中显示指定loader
import Styles from 'style-loader!css-loader!./styles.css';
import Styles from 'style-loader!css-loader?modules=false&url=false!./styles.css'; // 查询参数
import Styles from 'style-loader!css-loader?{modules: true,url: false}!./styles.css'; // ?后传入json对象

常用的Loader

上一篇 下一篇

猜你喜欢

热点阅读