isomorphic-webpackを使ってhello worldアプリケーションを作成するには？

Question

"Hello、World！"を出力する単純なアプリケーションを作成したいと思います。 isomorphic-webpackを使用します。

Answer 1

最も簡単な方法は、createIsomorphicWebpack高水準抽象化を使用することです。

まず、基本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の構成に不足しているローダーを追加する必要があります。

• babel-loaderとbabel-react-preset
• css-loader
• style-loader