Skip to content

MPA(multiple-page application) plugin for umi.

License

Notifications You must be signed in to change notification settings

umijs/umi-plugin-mpa

Repository files navigation

umi-plugin-mpa

MPA(multiple-page application) plugin for umi.

NPM version Build Status NPM downloads

Why

有一些基于 atool-build 或者 roadhog 的老业务,是传统的 MPA(多页应用),并且他们是真的多页,因为每个页面之间的关系不大,强行套 SPA(单页应用)的模式意义并不大,反而多了一些冗余的代码,比如路由。

另外,atool-build 已停止维护。

所以,为了让这些老业务能更容易地升级上来,享受新的技术栈,我们提供了 umi-plugin-mpa 来支持多页应用,把 umi 单纯作为 webpack 封装工具来使用。同时,umi 的部分功能会不可用,比如路由、global.js、global.css、app.js 等。

Features

  • ✔︎ 禁用 umi 内置的 HTML 生成
  • ✔︎ 禁用 umi 内置的路由功能
  • ✔︎ 禁用 umi 默认生成的 entry 配置
  • ✔︎ 支持通过 targets 配置的补丁方案,配 BABEL_POLYFILL=none 则不打补丁
  • ✔︎ 支持多级目录自动查找 src/pages 下的 js 文件为 entry
  • ✔︎ import 的 html 文件会被生成到 dist 目录下
  • ✔︎ Hot Module Replacement
  • ✔︎ 通过 splitChunks 配置提取公共部分
  • ✔︎ 通过 html 配置根据入口文件自动生成 html
  • ✔︎ 通过 selectEntry 配置选择部分 entry 以提升调试效率
  • ✔︎ 支持查看 entry 列表,默认是 index.html,冲突时切换为 __index.html

Installation

$ yarn add umi-plugin-mpa

Usage

Config it in .umirc.js or config/config.js,

export default {
  plugins: ['umi-plugin-mpa'],
};

with options,

export default {
  plugins: [['umi-plugin-mpa', options]],
};

Options

entry

指定 webpack 的 entry

  • Type: Object
  • Default: null

如果没有设置 entry,会自动查找 src/pages 下的 js 或 ts 文件为 entry 。

entry 项的值如果是数组且最后一个是对象时,会作为此 entry 的额外配置项。

entry 的额外配置项目前支持:

context

如果有配 html 时会作为 html 的模板内容。

比如:

{
  entry: {
    foo: [
      './src/foo.js',
      {
        context: { title: '首页' }
      },
    ],
  },
  html: {},
}

然后在 html 模板里可以通过 htmlWebpackPlugin.options 使用通过 context 指定的配置项,

<title><%= htmlWebpackPlugin.options.title %></title>

htmlName

指定 import 生成的 html 文件的文件名。

  • Type: String
  • Default: [name].[ext]

可以用 [name][path][hash][ext],详见 https://github.com/webpack-contrib/file-loader

deepPageEntry

在自动查找 src/pages 下的 js 或 ts 文件为 entry 时,是否进入子目录查找

  • Type: Boolean
  • Default: false

注:会跳过以 __. 开头的目录

splitChunks

配置 webpack 的 splitChunks,用于提取 common 或 vendors 等。

  • Type: Boolean | Object
  • Default: false

如果值为 true,等于配置了 { chunks: 'all', name: 'vendors', minChunks: 2 },并且 html 的 chunks 会配置为 ["vendors", "<%= page %>"],详见 https://webpack.js.org/plugins/split-chunks-plugin/

比如只要包含 node_modules 下的公共部分,可以这样配:

{
  splitChunks: {
    cacheGroups: {
      vendors: {
        chunks: 'all',
        minChunks: 2,
        name: 'vendors',
        test: /[\\/]node_modules[\\/]/,
      },
    },
  },
  html: {
    chunks: ['vendors', '<%= page %>'],
  },
}

html

配置给 html-webpack-plugin 的配置,用于为每个 entry 自动生成 html 文件。

  • Type: Object
  • Default: null

如有配置,则会基于以下默认值进行覆盖,

{
  template,
  filename: `${page}.html`,
  chunks: [page]
}

其中,

  • template 有一个默认模板,可通过配置进行覆盖
  • 如果有一个和 entry 文件同目录同文件名但后缀为 .ejs 的文件,则会用次文件作为其 template,且优先级最高
  • chunks 有一个特殊项为 <%= page %>,如果配置了,会被替换为当前 page 名

更多配置方式,详见 https://github.com/jantimon/html-webpack-plugin#options

selectEntry

是否开启 entry 选择,以提升开发效率。

  • Type: Boolean | Object
  • Default: false

注:

  1. 值为 Object 时会用于覆盖默认的 inquirer 配置,详见https://github.com/SBoudrias/Inquirer.js#question
  2. 适用于 entry 量大的项目,只在 dev 时开启
  3. 由于使用了 deasync-promise,所以在入口选择界面上按 Ctrl+C 退出会失败,且进程清理不干净。这时需手动强制退出相关 node 进程。

Questions & Suggestions

Please open an issue here.

LICENSE

MIT