static-site-generator-webpack-plugin我遇到了一些问题。
在我正在使用的项目中:
这是一个单页网站。
以下是webpack.config.babel.js
文件的一部分:
import StaticSiteGeneratorPlugin from 'static-site-generator-webpack-plugin'
export default {
entry: {
main: './components/Root/index.jsx',
},
output: {
path: path.join(process.cwd(), './public'),
filename: '[name].[hash].js',
libraryTarget: 'umd',
},
plugins: [
// ...
new StaticSiteGeneratorPlugin('main', '/', {}),
]
// ...
}
这是./components/Root/index.jsx
档案:
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import HTMLDocument from 'react-html-document'
import App from '../App/index.jsx'
export default function (locals, callback) {
const MyHtml = (
<HTMLDocument
title='My Page'
metatags={[
{ name: 'description', content: 'My description' },
]}
scripts={[ `${locals.assets.main}` ]}>
<App />
</HTMLDocument>
)
const html = ReactDOMServer.renderToStaticMarkup(MyHtml, locals.assets)
callback(null, '<!doctype html>' + html)
}
当我尝试使用它时,我看到错误消息:ERROR in ReferenceError: self is not defined
。这是什么意思?
答案 0 :(得分:5)
我在 webpack-dev-server 时遇到了同样的错误。此错误的原因是在服务器上呈现。服务器没有 self 对象。您可以使用scope
选项(https://github.com/markdalgleish/static-site-generator-webpack-plugin#scope)或者只是避免在服务器上使用static-site-generator-webpack-plugin。
如果您使用 webpack-dev-server 来解决此错误,则必须设置inline: false
(https://github.com/webpack/docs/wiki/webpack-dev-server#inline-mode)。
如果您想在根网址中使用热重新加载,而不使用iframe,只需将<script src="http://localhost:8080/webpack-dev-server.js"></script>
添加到您的网页(https://github.com/webpack/docs/wiki/webpack-dev-server#inline-mode-in-html)。