包阅导读总结
1. 关键词：`Rspack`、`大仓应用`、`构建提效`、`postcss-loader`、`less-loader`
2. 总结： 本文主要介绍了基于 Rspack 实现大仓应用构建提效的实践，包括对 css、less 等文件处理的相关配置。
3. 主要内容：
– 介绍了 postcssLoader 的配置
– 介绍了 lessLoader 的配置
– 给出了默认的配置信息，如 builtins 中 css 的 modules 配置
– 在 module 的 rules 中
– 对 `\.(j|t)s(x)?$` 文件使用 `builtin:swc-loader` 及相关实验性插件处理
– 对 `.css(\?.)?$` 文件根据 resourceQuery 不同分别使用 postcssLoader 处理，并设置不同类型
– 对 `.less(\?.)?$` 文件根据 resourceQuery 不同分别使用 postcssLoader 和 lessLoader 处理，并设置不同类型
思维导图：
文章地址：https://mp.weixin.qq.com/s/qkXbVJd0xYs8p-FU-njfsw
文章来源：mp.weixin.qq.com
作者：期越
发布时间：2024/7/10 10:19
语言：中文
总字数：8362字
预计阅读时间：34分钟
评分：85分
标签：Rspack,Webpack,前端工程,构建优化,大仓应用
以下为原文内容
本内容来源于用户推荐转载，旨在分享知识与观点，如有侵权请联系删除 联系邮箱 media@ilingban.com
const postcssLoader = {loader: require.resolve('postcss-loader'),options: {}};const lessLoader = {loader: require.resolve('less-loader'),options: {}}export default {builtins: {css: {modules: {localsConvention: 'asIs',localIdentName: '[local]_[hash:8]',},},},module: {rules: [{test: /\.(j|t)s(x)?$/,loader: 'builtin:swc-loader',options: {experimental: {plugins: [[require.resolve('swc-plugin-auto-css-modules'), {}]]}},},{test: /\.css(\?.*)?$/,oneOf: [{resourceQuery: /modules/,use: [postcssLoader],type: 'css/module'},{use: [postcssLoader],type: 'css'},]},{test: /\.less(\?.*)?$/,oneOf: [{resourceQuery: /modules/,use: [postcssLoader, lessLoader],type: 'css/module'},{use: [postcssLoader, lessLoader],type: 'css'},]},]}}
