Webpack 2：静态站点生成器插件“未定义自我”答案

【问题标题】：Webpack 2: static-site-generator-plugin "self is not defined"Webpack 2：静态站点生成器插件“未定义自我”
【发布时间】：2017-04-11 06:23:48
【问题描述】：

static-site-generator-webpack-plugin 有问题。

在我正在使用的项目中：

webpack v2.1.0-beta.27
static-site-generator-webpack-plugin v3.1.0
react 和 react-dom v15.4.1

这是一个单页网站。

这是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。什么意思？

【问题讨论】：

标签： reactjs webpack webpack-2

【解决方案1】：

我在使用 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)。如果您想在您的根 URL 中使用热重载，而无需 iframe，只需将 <script src="http://localhost:8080/webpack-dev-server.js"></script> 添加到您的页面 (https://github.com/webpack/docs/wiki/webpack-dev-server#inline-mode-in-html)。

【讨论】：

一个该死的inline: false 属性解决了它。不敢相信。你的窝应该得到一块饼干。