README
umi-plugin-ssr
SSR(server-side render) plugin for umi.
Why
const nodeExternals = require('webpack-node-externals')
const paths = require('./paths')
module.exports = merge(baseConfig, {
mode: 'production',
entry: {
app: './web/page/app/index.js'
},
target: 'async-node',
externals: nodeExternals({
whilelist: /\.(css|less|sass|scss)$/
}),
output: {
path: paths.appBuild,
publicPath: '/dist',
filename: '[name].js',
libraryTarget: 'commonjs2'
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: false
})
]
})
Features
- ✔︎ 禁用 umi 内置的 HTML 生成
- ✔︎ 禁用 umi 内置的路由功能
- ✔︎ 禁用 umi 默认生成的 entry 配置
- ✔︎ 支持通过 targets 配置的补丁方案
- ✔︎ 支持自动查找
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-ssr
Usage
Config it in .umirc.js
or config/config.js
,
export default {
plugins: ['umi-plugin-ssr'],
};
with options,
export default {
plugins: [
['umi-plugin-ssr', options],
],
};
Options
entry
指定 webpack 的 entry 。
- Type:
Object
- Default: null
如果没有设置 entry,会自动查找 src/pages
下的 js 或 ts 文件为 entry 。
htmlName
指定 import 生成的 html 文件的文件名。
- Type:
String
- Default:
[name].[ext]
可以用 [name]
、[path]
、[hash]
和 [ext]
,详见 https://github.com/webpack-contrib/file-loader 。
splitChunks
配置 webpack 的 splitChunks,用于提取 common 或 vendors 等。
- Type:
Boolean | Object
- Default: false
如果值为 true
,等于配置了 { chunks: 'async', name: 'vendors' }
,并且 html 的 chunks 会配置为 ["vendors", "<%= page %>"]
,详见 https://webpack.js.org/plugins/split-chunks-plugin/ 。
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 进程。
LICENSE
MIT