如何使用isomorphic-webpack創建一個hello world應用程序？

最簡單的方法是使用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編譯器。
在watch模式下運行編譯器。
覆蓋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配置：

來源

2016-09-11 15:05:33 Gajus

如何使用isomorphic-webpack創建一個hello world應用程序？

回答

相關問題