utquidem
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
75 lines (56 loc) • 2.63 kB
Markdown
title: 管理应用入口
上一个小节中，我们学习了使用命令行手动创建新的入口。
在这一小节中，我们将通过配置项来对入口进行管理。
我们可以在 `package.json` 中的 `modernConfig`，或是在符合[业界主流惯例](https://github.com/davidtheclark/cosmiconfig)的 Modern.js 配置文件里，自己写代码来控制项目的配置。
之前的章节中，我们都是直接修改 `package.json` 中的 `modernConfig` 字段来实现修改配置。
现在，让我们在项目目录下，新建一个 `modern.config.js`（若已新建可忽略），并在里面添加内容：
```js title="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 功能就恢复开启了。
:::info 注
当相同配置字段出现于两个文件中时， `package.json` 中 `modernConfig` 字段里的配置会优先于 `modern.config.js` 中的配置。
:::
当需要配置包含复杂逻辑的选项时，比如，开发者想在项目中使用 `*.myext` 文件，这是一种非主流的文件类型，Modern.js 没有默认集成对它的支持。
所以，开发者可以在 `modern.config.js` 里增加对它的支持（通过webpack配置），如下所示：
:::info 注
更多 webpack 配置相关可以查看 [Webpack 配置文档](/docs/apis/config/tools/webpack)。
:::
```js
// 注：以下为伪代码，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` 来手动配置，比如：
```js
export default defineConfig({
server: {
ssrByEntries: {
'landing-page': process.env.NODE_ENV !== 'production',
},
},
};
```
以上代码实现表示只在开发环境里开启 SSR。