Question

所以我正在尝试使用static-site-generator-webpack-plugin为我正在处理的单页反应应用生成静态网站。

现有的app使用react-dom的渲染功能将我的app组件渲染到index.html文件中的div中：

index.jsx

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p>Hola!Yeah </p>;
  }
}

render(<App/>, document.getElementById('app'));

的index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

webpack.config.json

var webpack = require('webpack');
var path = require('path');
var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin')
var data = require('./data')

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  // Existing Code ....
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      }
    ]
  },
  plugins: [
    new StaticSiteGeneratorPlugin('bundle.js', data.routes, data)
  ]
};

module.exports = config;

但是当我尝试运行webpack时，我收到了这个错误：

ERROR in ReferenceError: document is not defined

基于其他一些教程，看起来我应该能够以这种方式呈现：

ReactDOMServer.renderToStaticMarkup(App)

但是这只会渲染组件，而不包含index.html的其他内容。

我缺少什么，如何使用webpack渲染静态网站？

使用webpack将应用程序反应到静态站点时出错：ReferenceError：未定义文档

0 个答案: