静态站点生成器网络包插件
最小的,无接触的静态站点发电机由网包供电.
将服务器渲染的世界带到您的静态构建过程中 。 或提供一系列要渲染的路径,或 自动爬行您的网站,和一组匹配的 index.html 文件将在您的输出目录中通过执行您的自定义、 webpack 编译渲染功能来提供 .
此插件对通用库特别有效, 如 反应 财务报告和审定财务报表 反应路由器 因为它允许您在构建时提前交出您的路由,而不是在生产时需要节点服务器.
安装
$ npm install --save-dev static-site-generator-webpack-plugin
使用量
确保您安装了网络包, 例如 . npm install -g webpack
网络包装. config.js
const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'index.js',
path: 'dist',
/* IMPORTANT!
* You must compile to UMD or CommonJS
* so it can be required in a Node context: */
libraryTarget: 'umd'
},
plugins: [
new StaticSiteGeneratorPlugin({
paths: [
'/hello/',
'/world/'
],
locals: {
// Properties here are merged into `locals`
// passed to the exported render function
greet: 'Hello'
}
})
]
};
指数.js
同步渲染 :
module.exports = function render(locals) {
return '<html>' + locals.greet + ' from ' + locals.path + '</html>';
};
Async 通过回调渲染 :
module.exports = function render(locals, callback) {
callback(null, '<html>' + locals.greet + ' from ' + locals.path + '</html>');
};
承诺:
module.exports = function render(locals) {
return Promise.resolve('<html>' + locals.greet + ' from ' + locals.path + '</html>');
};
多重渲染
如果每次渲染需要生成多个文件,或者需要更改路径,可以返回一个对象而不是字符串,其中每个键是路径,而值是文件内容:
module.exports = function render() {
return {
'/': '<html>Home</html>',
'/hello': '<html>Hello</html>',
'/world': '<html>World</html>'
};
};
请注意,对于您在 paths 在插件配置中的数组.
默认本地
// The path currently being rendered:
locals.path;
// An object containing all assets:
locals.assets;
// Advanced: Webpack's stats object:
locals.webpackStats;
您的配置中提供的其他本地人也可访问.
爬行模式
而不是手动提供路径列表, 您可以使用 crawl 选择自动爬行您的网站。 这将遵循所有相对链接和iframes, 执行您的渲染函数 :
module.exports = {
...
plugins: [
new StaticSiteGeneratorPlugin({
crawl: true
})
]
};
请注意,可结合《公约》第22条使用 paths 选项以允许多个爬行器入口:
module.exports = {
...
plugins: [
new StaticSiteGeneratorPlugin({
crawl: true,
paths: [
'/',
'/uncrawlable-page/'
]
})
]
};
自定义文件名
通过提供最终路径 .html,您可以生成默认以外的自定义文件名 index.html。请注意,如果使用路由器,这可能会破坏与路由器的兼容性.
module.exports = {
...
plugins: [
new StaticSiteGeneratorPlugin({
paths: [
'/index.html',
'/news.html',
'/about.html'
]
})
]
};
全球
如果需要, 您可以在执行渲染函数时提供全局范围内存在的对象 。 如果您使用的某些库或工具假设浏览器环境,这尤其有用.
例如,当使用 Webpack 时 require.ensure,假设 window 已存在 :
module.exports = {
...,
plugins: [
new StaticSiteGeneratorPlugin({
globals: {
window: {}
}
})
]
}
资产支助
模板.ejs
<% css.forEach(function(file){ %>
<link href="<%- file %>" rel="stylesheet">
<% }); %>
<% js.forEach(function(file){ %>
<script src="<%- file %>" async></script>
<% }); %>
指数.js
if (typeof global.document !== 'undefined') {
const rootEl = global.document.getElementById('outlay');
React.render(
<App />,
rootEl,
);
}
export default (data) => {
const assets = Object.keys(data.webpackStats.compilation.assets);
const css = assets.filter(value => value.match(/\.css$/));
const js = assets.filter(value => value.match(/\.js$/));
return template({ css, js, ...data});
}
指定条目
此插件默认为已找到的第一个块 。 虽然在大多数情况下这应该可行,但如果需要,您可以指定条目名称:
module.exports = {
...,
plugins: [
new StaticSiteGeneratorPlugin({
entry: 'main'
})
]
}
压缩支持
生成的文件可以被压缩 压缩- webpack- 插件,但首先要确保此插件在您的插件阵列中压缩-webpack-plugin之前出现 :
const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
...
plugins: [
new StaticSiteGeneratorPlugin(...),
new CompressionPlugin(...)
]
};
相关项目
- 反应- 路由- 阵列 - 有助于避免硬编码的路线清单
- 加兹比 - 在这个插件上建造的有意见的静态站点生成器