WebPack обещаний

Question

Я рассматриваю, используя Webpack в моих существующей SPA рамках нокаута на основе для того, чтобы ленивые моделей нагрузки, а пользователь просматривает сайт

Я посмотрел на ниже нити Create individual SPA bundles with Webpack

, и принятый ответ казался очень похожим на то, чего я пытаюсь достичь. В основном каждая страница SPA состоит из набора компонентов, которые возвращаются с сервера в формате JSON.

Клиент сопоставляет эти компоненты с отдельными js-моделями. Прямо сейчас, эти модели js объединены в один большой файл и обслуживаются клиентом, в первый раз, когда сайт отображается.

Я хотел бы разбить эти компоненты (через require и require.ensure) на куски, которые будут загружаться по требованию с помощью webpack.

Итак, я попробовал предлагаемое решение из вышеупомянутой темы, и оно отлично работало. Я также добавил директиву корня в webpack.config.js

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 внутри модели каталога/компонентов)

Теперь проблема я бегу в том, что я пытался извлечь все требует от заявления переключателя на функцию, которая возвращает 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, поскольку, когда я пытаюсь с прямым требованием, отлично работает

Любые идеи? Thanks

Answer 1

Webpack использует статический анализ, чтобы узнать, какие модули необходимо связывать (и как их связывать). Поскольку вы абстрагируетесь от необходимости, webpack больше не может понять, что именно вы требуете. Чтобы избежать взлома, он затем пытается связать все, что вы могли бы иметь в виду. В этом случае это, вероятно, означает буквально каждый отдельный JS-файл, который он может найти в вашем каталоге проекта (включая все JS-файлы в node_modules).

Если вы хотите пообещать асинхронный запрос Webpack, вам придется просто дублировать свой код для каждого пакета асинхронизации.