管理应用入口​​​

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

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

我们可以在 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.json 中 modernConfig 字段里的配置会优先于 modern.config.js 中的配置。

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

所以，开发者可以在 modern.config.js 里增加对它的支持（通过webpack配置），如下所示：

注

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

// 注：以下为伪代码，loader等名字皆为虚构，仅做演示使用
export default defineConfig({
  tools: {
    webpackChain: (chain) => {
      chain.module
        .rule('my-loader')
        .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。