Почему расщепление кода webpack не работает для меня?

Я использую require.ensure для создания разделяемых точек на пути реагировать-маршрутизатор. Тем не менее, в моем каталоге сборки еще есть app.js в дополнение к vendor.js. Я ожидал отдельный файл js для каждого используемого мной пути require.ensure.

Я использовал require.ensure на каждом пути следующим образом:

<Route path= 'auth' getComponent={(nextState, callback) => {
  require.ensure([], (require) => {
    callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
  }, 'auth')
}}/>

мой вывод конфигурации веб-пакета для сборки выглядит следующим образом:

output: {
  path: PATHS.build,
  filename: '/[name].[chunkhash].js',
  chunkFilename: '/[chunkhash].js'
}

Вот суть моего файла и моего файла конфигурации webpack в полном объеме.

ОБНОВЛЕНИЕ: Я понял, что я делаю неправильно. Моя структура проекта для контейнеров такова:

-app
 -containers
   -containerA.
     -containerA.js
   -containerB
     -containerB.js
   -containerC
     -containerC.js
   -index.js

Проблема: я все еще экспортировал контейнеры, которые мне требовались в файле маршрутов, например: export containerB из './containerB/containerB' Удаление экспорта в index.js и требование прямой из контейнераB.js сделали трюк.

Ответ 1

Обеспечивает получение массива аргументов необходимых вам модулей. Вам нужно предоставить массив именам модулей, которые вы хотите динамически загружать. В вашем случае предоставьте "container/Authenticate/AuthenticateContainer.js", чтобы обеспечить следующее:

require.ensure(['containers/Authenticate/AuthenticateContainer.js'], (require) => {
      callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
    }, 'auth');

Ответ 2

У меня была одна и та же проблема в одном из моих проектов: мы использовали Systemjs и решили переключиться на Webpack, поэтому он нарушил наш System.import. Зафиксируем его, заменив:

System.import(modulePath)
  .then(module => {
    // Do things
  })

С помощью:

new Promise((resolve, reject) => {
    resolve(require(modulePath));
}).then((module) => { 
  // Do things 
});

Надеюсь, что это поможет

Ответ 3

Я использую webpack 1.13.1, и вот моя конфигурация

output: {
        path: PATHS.build,
        filename: '[name].[hash].js',
        publicPath:"/"
    },

вот код для компонента get

const lazyLoadSomeComponent = () => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          callback(null, require("./componentpath")["default"]);
        }, 'componentName');
      }
    }
};

Затем в пути

<Route path="somepath" {...lazyLoadSomeComponent()} />

Но что здесь происходит?

Сначала мы создаем функцию, которая вернет нам метод get component.
Во-вторых, мы вызываем эту функцию в маршруте и выполняем ее, чтобы мы получили компонент get get Method, это упростит чтение маршрутов.
Последний в webpack указывает общий путь, так что "/" здесь разрешается от корня вашего сервера, вы также можете указать свой домен здесь

Для дальнейшего улучшения мы можем сразу загрузить несколько компонентов, используя метод ниже

const LazyComponents = (pageName) => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          switch(pageName){
            case 'Component1':
            callback(null, require("./components/component1")["default"]);
            break;
            case 'Component2' :
                callback(null, require( "./components/component2" )["default"]);
                    break ;

        }, "CombinedComponents");
      }
    }
};

Затем в маршрутах

<Route path="somepath" {...LazyComponents('Component1')} />

Ответ 4

<Route path= 'auth' getComponent={(nextState, callback) => {
  require.ensure(['containers/Authenticate/AuthenticateContainer.js'], (require) => {
    const AuthenticateContainer = require('containers/Authenticate/AuthenticateContainer.js').default;

    callback(null, <AuthenticateContainer />)
  }, 'auth')
}}/>

Попробуйте это. Я думаю, что обратный вызов нуждается в компоненте реакции.