webpack中，loader从右到左（或从下到上）执行是什么意思

2023-06-08 10:21| 来源: 网络整理| 查看: 265

在webpack中文文档中有这样一句话loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。该如何理解这句话呢？想来搭建一个demo。

项目结构是这样

| src | index.js | index.less package.json webpack.config.js

大致项目是这样的： src/index.js

import "./index.less" let oDiv = document.createElement("div") document.body.appendChild(oDiv)

src/index.less

div{ width: 100px; height: 100px; background-color: red; }

package.json

{ "devDependencies": { "css-loader": "^6.7.4", "html-webpack-plugin": "^5.5.1", "less": "^4.1.3", "less-loader": "^11.1.0", "style-loader": "^3.3.3", "webpack": "^5.82.1", "webpack-cli": "^5.1.1", "webpack-dev-server": "^4.15.0" }, "scripts": { "dev": "npx webpack" } }

来看一个例子：

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', devtool: 'inline-source-map', module: { rules: [ { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader', ], }, ], }, plugins: [ new HtmlWebpackPlugin(), ], };

这里我们以less作为例子看看，这里的配置的意思是，如果遇到.less结尾的文件，那么先用less-loader处理，然后再用css-loader，最后用style-loader。这里很符合上文提到从右到左（或从下到上）原则。那么再来看一个例子：

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', devtool: 'inline-source-map', module: { rules: [ { test: /\.css$/i, use: [ 'style-loader', 'css-loader', ], }, { test: /\.less$/i, use: [ 'less-loader', ], }, ], }, plugins: [ new HtmlWebpackPlugin(), ] };

这样配置之后，大家会不会想，遇到.less结尾的文件使用less-loader处理，进而.less文件变成了.css文件，less文件变成了css文件后，在被css-loader和style-loader处理？

其实运行之后会看到，报错了。

这也证明，从右到左（或从下到上）地取值(evaluate)/执行(execute)这句话的意思其实是作用在同一个rules项中的。为非整个rules

【本文地址】

公司简介

联系我们