Question

我正在使用构建反应，es6模块和meteor与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加载到一个单独的包中，所以我的'loader'至少在一半的加载过程中处于活动状态。

这是我最终能找到的唯一解决方案。

反应，流星，webpack，es6。如何创建加载/启动画面

1 个答案: