反応する、流星、ウェブパック、es6。読み込み/スプラッシュ画面を作成する方法

Question

私はwebpackで反応、es6モジュール、流星のビルドを使用しています。これらの技術者は、何かがページに表示される前に、すべてのものを読み込むためにしばらく時間がかかります。このスタックを使用してプリロード/スプラッシュ画面を表示するにはどうすればよいですか？

私WebPACKのファイル：

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    entry: [ 
     'babel-polyfill', 
     './entry' 
    ], 
    resolve: { 
     extensions: ['', '.js', '.jsx', '.json','css','scss'] 
    }, 
    devtool: 'eval', 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: 'babel', 
       exclude: /node_modules/, 
       query: { 
        plugins:['transform-runtime'], 
        presets:['es2015','stage-0','react'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       loader: 'style-loader!css-loader!sass-loader!postcss-loader' 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loaders: [ 
        'url?limit=8192', 
        'img-loader' 
       ] 
      }, 
     ] 
    }, 
    postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ] 
}; 

マイentry.jsファイル：

import '../store.js'; 
import './../lib/routes.jsx'; 

マイroutes.jsxファイル：

import React from 'react'; 
import {FlowRouter} from 'meteor/kadira:flow-router'; 
import {mount} from 'react-mounter'; 
import $ from 'jquery'; 
import store from '../store.js'; 
import {Provider} from 'react-redux'; 

import App from '../client/components/app/app.jsx'; 
import HomePage from '../client/components/pages/home/homePage.jsx'; 
import AboutPage from '../client/components/pages/about/aboutPage.jsx'; 
import BlogPage from '../client/components/pages/blog/blogPage.jsx'; 
import BlogPostPage from '../client/components/pages/blogPost/blogPostPage.jsx'; 

FlowRouter.route('/', { 
    name:"home", 
    action() { 
     mount(App, {page: <Provider store={store}><HomePage /></Provider>}); 
    } 
}); 
FlowRouter.route('/about', { 
    name:"about", 
    action() { 
     mount(App, {page: <Provider store={store}><AboutPage /></Provider>}); 
    } 
}); 
FlowRouter.route('/blog', { 
    name:"blog", 
    action() { 
     mount(App, {page: <Provider store={store}><BlogPage /></Provider>}); 
    } 
}); 
FlowRouter.route('/blog/:slug', { 
    name:"blog post", 
    action(params) { 
     console.log(params); 
     mount(App, {page: <Provider store={store}><BlogPostPage slug={params.slug} /></Provider>}); 
    } 
}); 

// this is just a work around for a problem I am having with initial rout loading in development mode. 
if (!$('.app-root').length) 
    FlowRouter.go(window.location.href.replace(/^http(s)?\:\/\/[^:\/\#]*(\:[^\/\#]*)?\/?/,'/').replace(/\#.*$/,'')+'#'+Math.floor(Math.random()*100000)); 

let lastPage = FlowRouter.current(); 
store.subscribe(()=>{ 
    let state = store.getState(); 
    if (!state || state.currentURL != lastPage) 
     FlowRouter.go(state.currentURL); 
}); 

Answer 1

研究のトンと多くの後このスレッドのヘルプ：https://github.com/webpack/webpack/issues/215

私は、これを行う信頼できる方法がないことを発見しました。少なくとも、私が心に留めていたものではありません。

私が最後に使用した溶液は、次のコードを使用するために私のエントリファイルにあった：

import $ from 'jquery'; 

$('body').addClass('css-loading-class-goes-here'); 

require.ensure(['../store.js', './../lib/routes.jsx'], function(require) { 
    require(['../store.js','./../lib/routes.jsx']); 
}); 

あなたは、CSSを追加し、コンテンツを追加したり、そこ開始時にやりたい任意の他、しかし、このことができますWebpackや友人からの 'ネイティブ' javascriptの多くがロードされた後にのみ実行されます（私の場合は約350kbです）。それから、require.ensureはwebpackに、私のアプリケーション固有のjavascriptを別のバンドルにロードして、ロードプロセスの半分がアクティブでないようにします。

これは私が最後に見つけることができた唯一の解決策でした。