loader是什么?

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

1.是什么

webpack默认处理js模块,css和less文件需要另外的来处理,即就是loader

2.处理css文件

下包

npm i css-loader -D 。它也是开发依赖,是为了加载css文件

npm i style-loader -D 希望样式生效需要下包,将css的样式添加到html 的标签style中

配置

main.js中引入css文件(css-loader来处理css)

// nodejs中的模块化
const { updateDom } = require('./tool')
// es6中的模块化
import {log} from './tooles6'
​
 import '../css/style.css'//引入css文件
updateDom ('app','index.html')
log('test')

• 添加代码:import '../css/style.css'/引入对应的css文件

webpack.config.js中引入module(style-loader处理css的样式)

const path = require('path')
module.exports = {
  mode: 'development',
  entry:'./src/js/main.js',
  output:{
    path:path.resolve(__dirname, './build'),
    filename:'bundle.js'
  },
  module:{ // 处理非js模块
    rules:[ // 规则
      {
        test: /.css$/,         // 正则测试
        use: ['css-loader']     // loader
      }
    ]
  }
}

• 添加代码:module:{rules:[]}
• style-loader来处理css的样式,把css的代码插入到html标签的style标签中

3.处理less文件

下包

npm i less-loader less -D

配置

module.exports = {
    // 非js模块，在这里处理
    module: {
        rules: [ // 规则
            {
                test: /.css$/,     // 正则匹配，以.css结尾的文件
                // 如果发现是.css文件，则由如下两个loader来处理
                // 处理的顺序是   从右向左
                // css-loader: 作用是允许.js中引入.css
                // style-loader:作用是在.html上创建style标签，把css代码输入进去
​
                use: ['style-loader','css-loader'] // 匹配成功，使用指定的loader
            },
            {
                 test: /.less$/,     // 正则匹配，以.less结尾的文件
                // 如果发现是.less文件，则由如下三个loader来处理
                // 处理的顺序是   从右向左
                // less-loader: 作用是加载less文件，会帮你less转成css
                // css-loader: 作用是允许.js中引入.css
                // style-loader:作用是在.html上创建style标签，把css代码输入进去
                
                 use: ['style-loader','css-loader','less-loader'] // 匹配成功，使用指定的loader
             }
        ]
    }
}

• 添加一个test: use:[]

4.处理资源文件

配置

style.css中引入图片,作为背景图

@import "public.css";
div {
  border:4px solid #ccc;
  width: 50%;
  height: 200px;
  margin:30px auto;
  box-shadow: 3px 3px 3px #ccc;
  background-color:pink;
  text-align: center;
  background-image: url('../img/webpack.svg')//引入图片
}

webpack.config.js中设置test,type

module: {
    rules: [ 
        // ...省略其他
        {
            test: /.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        }
    ]
}

• test:匹配图片文件
• type:"asset" 对图片进行选择