MPA(multiple-page application) plugin for umi.
MPA(multiple-page application) plugin for umi.
有一些基于 atool-build 或者 roadhog 的老业务,是传统的 MPA(多页应用),并且他们是真的多页,因为每个页面之间的关系不大,强行套 SPA(单页应用)的模式意义并不大,反而多了一些冗余的代码,比如路由。
另外,atool-build 已停止维护。
所以,为了让这些老业务能更容易地升级上来,享受新的技术栈,我们提供了 umi-plugin-mpa 来支持多页应用,把 umi 单纯作为 webpack 封装工具来使用。同时,umi 的部分功能会不可用,比如路由、global.js、global.css、app.js 等。
BABEL_POLYFILL=none
则不打补丁src/pages
下的 js 文件为 entrysplitChunks
配置提取公共部分html
配置根据入口文件自动生成 htmlselectEntry
配置选择部分 entry 以提升调试效率index.html
,冲突时切换为 __index.html
$ yarn add umi-plugin-mpa
Config it in .umirc.js
or config/config.js
,
export default {
plugins: ['umi-plugin-mpa'],
};
with options,
export default {
plugins: [['umi-plugin-mpa', options]],
};
指定 webpack 的 entry 。
Object
null
如果没有设置 entry,会自动查找 src/pages
下的 js 或 ts 文件为 entry 。
entry 项的值如果是数组且最后一个是对象时,会作为此 entry 的额外配置项。
entry 的额外配置项目前支持:
如果有配 html
时会作为 html 的模板内容。
比如:
{
entry: {
foo: [
'./src/foo.js',
{
context: { title: '首页' }
},
],
},
html: {},
}
然后在 html 模板里可以通过 htmlWebpackPlugin.options
使用通过 context
指定的配置项,
<title><%= htmlWebpackPlugin.options.title %></title>
指定 import 生成的 html 文件的文件名。
String
[name].[ext]
可以用 [name]
、[path]
、[hash]
和 [ext]
,详见 https://github.com/webpack-contrib/file-loader 。
在自动查找 src/pages
下的 js 或 ts 文件为 entry 时,是否进入子目录查找
Boolean
false
注:会跳过以 __
或 .
开头的目录
配置 webpack 的 splitChunks,用于提取 common 或 vendors 等。
Boolean | Object
如果值为 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-webpack-plugin 的配置,用于为每个 entry 自动生成 html 文件。
Object
null
如有配置,则会基于以下默认值进行覆盖,
{
template,
filename: `${page}.html`,
chunks: [page]
}
其中,
.ejs
的文件,则会用次文件作为其 template,且优先级最高<%= page %>
,如果配置了,会被替换为当前 page 名更多配置方式,详见 https://github.com/jantimon/html-webpack-plugin#options 。
是否开启 entry 选择,以提升开发效率。
Boolean | Object
false
注:
Please open an issue here.
MIT