umi-plugin-mpa
v2.1.2
Published
MPA(multiple-page application) plugin for umi.
Downloads
24
Readme
umi-plugin-mpa
MPA(multiple-page application) plugin for umi.
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
注:
- 值为 Object 时会用于覆盖默认的 inquirer 配置,详见https://github.com/SBoudrias/Inquirer.js#question
- 适用于 entry 量大的项目,只在 dev 时开启
- 由于使用了 deasync-promise,所以在入口选择界面上按 Ctrl+C 退出会失败,且进程清理不干净。这时需手动强制退出相关 node 进程。
Questions & Suggestions
Please open an issue here.
LICENSE
MIT