lvarayut/relay-fullstack

[FEATURE] webpack.config.js for server-side rendering

オープン

#36 opened on 2016/09/16

 (2 件のコメント) (0 件のリアクション) (0 人の担当者)JavaScript (119 件のフォーク)batch import
help wantedquestion

Repository metrics

Stars
 (979 個のスター)
PR merge metrics
 (30d に merged PR はありません)

説明

Hello!

First of all, I'd like to thank you for this awesome work! This really got us kickstarted quite well and we'll be able to work with this as a solid base for our React projects! It's awesome!

Still, I found one major concern with the current state of the project and it's mainly SEO.

So, with webpack it is possible to render the HTML staticaly (https://github.com/webpack/react-webpack-server-side-example) but I haven't figured out how to configure my relay-fullstack instance to do that, at all.

Here's my webpack.config.js, maybe you can tell me what is wrong or maybe suggest a way to do it properly?

Regards Tizian

webpack.config.js: 'use strict';

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

let appEntry;
let devtool;
let plugins;

if (process.env.NODE_ENV === 'production') {
  appEntry = [path.join(__dirname, 'client/index.js')];
  devtool = 'source-map';
  plugins = [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true
      }
    }),
    new HtmlWebpackPlugin({
      title: 'Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS',
      template: './client/index.html',
      mobile: true,
      inject: false
    }),
    new FaviconsWebpackPlugin('./client/assets/logo.png')
  ];
} else {
  appEntry = [
    path.join(__dirname, 'client/index.js'),
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server'
  ];
  devtool = 'eval';
  plugins = [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      __DEV__: true
    }),
    new HtmlWebpackPlugin({
      title: 'Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS',
      template: './client/index.html',
      mobile: true,
      inject: false
    }),
    new FaviconsWebpackPlugin('./client/assets/logo.png')
  ];
}


var commonLoaders = [
    { test: /\.js$/, loader: 'babel-loader', },
    { test: /\.png$/, loader: "url-loader" },
    { test: /\.jpg$/, loader: "file-loader" },
];

var assetsPath = path.join(__dirname, "public", "assets");
var publicPath = "assets/";

module.exports = [
    {
        // The configuration for the server-side rendering
        name: "server-side rendering",
        entry: "./server/page.js",
        target: "node",
        output: {
            path: assetsPath,
            filename: "../../server/page.generated.js",
            publicPath: publicPath,
            libraryTarget: "commonjs2"
        },
        resolve: {
            extensions: ['', '.jsx', '.js']
        },
        externals: /^[a-z\-0-9]+$/,
        module: {
            loaders:[
                { test: /\.jsx?$/, loader: "babel-loader", query: { presets: ['react', 'es2015'] } },
                { test: /\.jpe?g$|\.png$|\.gif$/, loader: "file-loader" }
            ]
        }
    }
];

/*
module.exports = {
  entry: {
    app: appEntry,
    vendor: ['react', 'react-dom', 'react-mdl', 'react-relay', 'react-router', 'react-router-relay']
  },
  output: {
    path: path.join(__dirname, 'build'),
    publicPath: '/',
    filename: '[name].js'
  },
  devtool,
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      loaders: ['style', 'css']
    }, {
      test: /\.scss$/,
      loaders: [
        'style',
        'css?modules&importLoaders=1' +
          '&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
      ]
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?\S*)?$/,
      loader: 'url-loader?limit=10000&name=assets/[hash].[ext]'
      //loader: 'file'
    }
    //,{test: /test woff/, loader}
    ]
  },
  postcss: () => [precss, autoprefixer],
  plugins
};
*/

コントリビューターガイド