跳转到主文档

管理应用入口​​​

上一个小节中,我们学习了使用命令行手动创建新的入口。

在这一小节中,我们将通过配置项来对入口进行管理。

我们可以在 package.json 中的 modernConfig,或是在符合业界主流惯例的 Modern.js 配置文件里,自己写代码来控制项目的配置。

之前的章节中,我们都是直接修改 package.json 中的 modernConfig 字段来实现修改配置。

现在,让我们在项目目录下,新建一个 modern.config.js(若已新建可忽略),并在里面添加内容:

modern.config.js
export default defineConfig({
server: {
ssr: true,
ssrByEntries: {
'landing-page': false,
},
},
};

执行 pnpm run dev,再用浏览器打开 view-source:http://localhost:8080/landing-page,可以看到 landing-page 网页内容是通过 js 动态加载的,且此页面的 SSR 功能被关闭。

注:此时,其他页面的 SSR 功能仍然正常开启。

如果注释掉 ssrByEntries 和它的值,landing-page 的 SSR 功能就恢复开启了。

当相同配置字段出现于两个文件中时, package.jsonmodernConfig 字段里的配置会优先于 modern.config.js 中的配置。

当需要配置包含复杂逻辑的选项时,比如,开发者想在项目中使用 *.myext 文件,这是一种非主流的文件类型,Modern.js 没有默认集成对它的支持。

所以,开发者可以在 modern.config.js 里增加对它的支持(通过webpack配置),如下所示:

更多 webpack 配置相关可以查看 Webpack 配置文档

// 注:以下为伪代码,loader等名字皆为虚构,仅做演示使用
export default defineConfig({
tools: {
webpack: (config, { chain }) => {
chain.module
.rule('loaders')
.test(/\.myext$/)
.use('custom-loader')
.loader('myext-loader')
.options({});
},
},
};

这个需求要修改 webpack 配置,用 Modern.js 配置的tools.webpack选项来实现显然是更方便的。

还有一些时候,需要一些更复杂的逻辑来做设置,比如需要 JS 变量、表达式、导入模块等,这种时候也适合用 modern.config.js 来手动配置,比如:

export default defineConfig({
server: {
ssrByEntries: {
'landing-page': process.env.NODE_ENV !== 'production',
},
},
};

以上代码实现表示只在开发环境里开启 SSR。