Question

我正在考虑在我现有的基于淘汰赛的SPA框架中使用webpack，以便在用户浏览网站时延迟加载模型

我看了下面的帖子 Create individual SPA bundles with Webpack

并且接受的答案似乎与我想要实现的非常相似。基本上，每个SPA页面都包含一组以JSON格式从服务器返回的组件。

客户端将这些组件映射到单个js模型。现在，这些js模型都捆绑在一个大文件中，并在第一次呈现网站时提供给客户端。

我想将这些组件（通过require和require.ensure）拆分成块，这些块将在webpack的帮助下按需加载。

所以，我从上面提到的线程中解决了所提出的解决方案，并且工作正常。我还在webpack.config.js

中添加了一个root指令

    var webpack = require('webpack'),
    path = require('path');

var commonsPlugin =
    new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    devtool1: 'eval-source-map',
    entry: {
        app: './app'
    },
    output: {
        path: __dirname + "/build",
        filename: '[name]-bundle.js',
        publicPath: "/code_split/build/"
    },
    watchOptions: {
        poll: 2000
    },
    resolve: {
        root: [
            path.resolve('./models/components')
        ],
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    plugins: [commonsPlugin]
}

这样我就可以在不指定相对路径的情况下需要模块（每个模型都在模块/组件目录中的js模块中）

现在我遇到的问题是我试图将所有需求从switch语句中提取到一个返回Promise的函数，该函数可以很好地与我现有的实现一起工作

所以而不是

var mod = window.location.hash.split('/')[1].toLowerCase();
switch(mod) {
    case "contacts":
        require(["./pages/contacts"], function(page) {
            // do something with "page"
        });
        break;
    case "tasks":
        require(["./pages/tasks"], function(page) {
            // do something with "page"
        });
        break;
}

我把它改成了

    function loadModule(mo){
        return new Promise(function(resolve){
            require([mo], function(module){
                resolve(module.default);
            });
        });
    }

switch(mod) {
        case "contacts":
            promise = loadModule("contacts");
            break;
        case "tasks":
            promise = loadModule("tasks");
            break;
    }

然而，在运行webpack之后，上述失败了。它似乎进入一个无限循环，因为它最终找到了一个惊人的大量模块来处理并最终吐出许多例外我很确定这是由loadModule函数引起的，因为当我尝试使用direct时，它可以正常工作

有什么想法吗？感谢

Answer 1

Webpack使用静态分析来找出要捆绑的模块（以及如何捆绑它们）。因为你抽象了需求，webpack再也无法弄清楚你究竟需要什么。为了避免事情破裂，它会尝试捆绑你可能意味着的一切。在这种情况下，这可能意味着它可以在项目目录中找到每个单独的JS文件（包括node_modules中的所有JS文件）。

如果您希望宣传Webpack的异步要求，则必须为每个异步捆绑包复制代码。

带有承诺的webpack异步模块

1 个答案: