Rule.issuer(通过父路径配置loader处理器)
说明
正常在设置loader配置规则时，都是通过文件后缀来配置的
issuer的作用是可以通过父级的路径，设置生效的匹配规则
- 与rule的差别
test: 匹配当前模块的路径（如 .css 文件）
== issuer:== 匹配引入当前模块的父模块的路径（如引入 .css 的 .js 文件） - 例如
- 如果 css 中的 c.js通过 import '…/css1/c1.css’引入了c1.css，则 c1.css的 issuer 是 目录css
代码配置
- webpack.config.js
const path = require('path');
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, 'dist1'),publicPath: "/dist1/"},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],issuer: {// 仅当父模块位于 css/ 目录时生效and: [/css/],}},]},optimization: {minimize: false}
}
- index.js
import './css2/c2.css'
import './css/c.js'
const index = () => {a()alert('this is index')
}
index()
- css/c.js
import '../css1/c1.css'
*css1/c1.css
body {background-color: blue;
}
- css2/c2.css
body {background-color: red;
}
效果展示
- 因为打包配置了issuer为 /css/ ，所以index.js中引入了 import ‘./css2/c2.css’ 打包时会因为没有匹配到rules报错
- c1.css 会被打包成功
- 运行展示时，页面的背景色为蓝色，说明配置的针对 /css/ 目录下的如果引入.css文件时，会用 style-loader,css-loader对其进行处理
