Question

我想创建一个简单的应用程序，输出＆＃34; Hello，World！＆＃34;使用isomorphic-webpack。

Answer 1

最简单的方法是使用createIsomorphicWebpack高级抽象。

首先，您需要具有基本的webpack配置。

webpack配置无需为isomorphic-webpack定义任何特殊配置，例如这将有效：

import path from 'path';
import webpack from 'webpack';

const webpackConfiguration = {
  context: __dirname,
  entry: {
    'app': [
      path.resolve(__dirname, './app')
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    loaders: []
  }
};

接下来，运行createIsomorphicWebpack：

import {
    createIsomorphicWebpack
} from 'isomorphic-webpack';

createIsomorphicWebpack(webpackConfiguration);

这是做什么的：

创建一个新的webpack编译器。
以监视模式运行编译器。
覆盖require以使用已编译的资产。

因此，现在您只需要输入脚本：

import {
  createServer
} from 'http';

http
  .createServer((request, response) => {
    response.writeHead(200, {
      'Content-Type': 'text/html'
    });

    response.end(request('./app'));
  })
  listen(8000);

条目脚本必须是环境感知的，即必须返回node.js进程，否则它必须使用任何客户端特定的逻辑，例如

import React from 'react';
import ReactDOM from 'react-dom';
import style from './style.css';

const app = <div className={style.greetings}>Hello, World!</div>;

if (typeof process === 'undefined' || !process.release || process.release.name !== 'node') {
  ReactDOM.render(app, document.getElementById('app'));
}

export default app;

由于此条目脚本使用的是css和react，因此您需要将缺少的加载器添加到您的webpack配置中：

如何使用isomorphic-webpack创建一个hello world应用程序？

1 个答案: