Modern.js 内部默认集成了 TypeScript、Rspack、PostCSS、SWC 等工具。通常情况下,默认配置能够满足大多业务开发需求。当有特殊需求时,可以通过底层配置来实现。
以配置 Rspack 为例,只需要在 modern.config.ts 中添加 tools.rspack 即可:
export default defineConfig({
tools: {
rspack: config => {
// 修改 Rspack 配置
},
},
});tools 命名空间下的配置都可以设置为 Object 或者 Function。
值为 Object 时,会与内部默认配置进行合并,具体合并策略参考对应的配置选项文档(见下表)。
值为 Function 时,第一个参数为内部的默认配置对象,可以直接修改这个对象不做返回,也可以返回一个新的对象或者合并后的对象作为最终结果。
目前提供的底层配置如下表:
| 底层工具 | 配置 |
|---|---|
| Rspack | tools.rspack |
| Bundler Chain | tools.bundlerChain |
| SWC | tools.swc |
| TypeScript Checker | tools.tsChecker |
| PostCSS | tools.postcss |
| Less | tools.less |
| Sass | tools.sass |
| CSS Extract | tools.cssExtract |
| CSS Loader | tools.cssLoader |
| Style Loader | tools.styleLoader |
| Lightning CSS | tools.lightningcssLoader |
| Minify CSS | tools.minifyCss |
| Autoprefixer | tools.autoprefixer |
| HTML Plugin | tools.htmlPlugin |