WebPACK niejawna sprzedawca/manifestują kawałeczków w IE11 - Promesa jest niezdefiniowany

Question

wersja skrócona

Kiedy uruchamiam moją aplikację w IE11, dostaję błąd mówiąc Promise is undefined z pliku manifest.js.

Jak dodać babel-polyfill lub podobne, takie, że działa przed manifest jest wykonywane?

Długa wersja

Próbuję dodać CommonsChunkPlugin do mojego WebPACK config aby rozdzielić od osoby trzeciej (pakiet npm) skrypty w osobnym pakiecie. Zgodnie z dokumentacją Webpack 2 ustawiłem "combined implicit common vendor chunks and manifest file", która działa dobrze w nowoczesnych przeglądarkach.

Napisałem funkcję, która zapewnia, że ​​porcje zostaną uwzględnione w pliku indeksu we właściwej kolejności (patrz poniżej).

Trochę tła na moich dwóch wyraźnych punktów wejścia:

• legacy_libs - Starsze bibliotek, które są umieszczone w globalnej przestrzeni nazw z script-loader. Mam nadzieję, że do fazy te z biegiem czasu
• głównej - Moim głównym punktem wejścia aplikacji

Pozostałe dwa (sprzedawca i manifest) są niejawne i stworzony z CommonsChunkPlugin.

Po uruchomieniu tego z IE11, pojawia się błąd: Promise is undefined. Wygląda na to, że sam manifest sieci Web wywołuje new Promise().

W moim głównym punkcie wejścia mam import 'babel-polyfill';. Zanim dodałem sprzedawcę o rozmiarze &, pozwoliło mi to przezwyciężyć brak obietnic IE. Ale teraz, gdy mam plik manifest.js, najpierw nie mogę obliczyć, jak umieścić go we właściwej kolejności.

Mój config wygląda tak:

module.exports = { 
    entry: { 
    legacy_libs: './app/libs.js', 
    main: './app/main.js' 
    }, 
    ... 
    plugins: [ 
    // Extract third party libraries into a separate vendor bundle. 
    // Also extract webpack manifest into its own bundle (to prevent vendor hash changing when app source changes) 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: function (module) { 
     return module.context && module.context.indexOf('node_modules') !== -1; 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'manifest' 
    }), 

    // Generate index.html file. 
    // Include script bundles in the right order based on chunk name prefixes. 
    new HtmlWebpackPlugin({ 
     template: 'app/index.ejs', 
     chunksSortMode: function (a, b) { 
     const chunkOrder = ['manifest', 'vendor', 'legacy_libs', 'main']; 
     const aChunk = chunkOrder.findIndex(chunk => a.names[0].startsWith(chunk)); 
     const bChunk = chunkOrder.findIndex(chunk => b.names[0].startsWith(chunk)); 
     const aValue = (aChunk > -1) ? aChunk : chunkOrder.length; 
     const bValue = (bChunk > -1) ? bChunk : chunkOrder.length; 
     return aValue - bValue; 
     } 
    }) 
} 

Answer 1

To wydaje się być problemem wprowadzono WebPacka 2.6.0, bug został już wydany: https://github.com/webpack/webpack/issues/4916

Tak więc albo poczekaj, aż poprawka zostanie zwolniona, albo wróć do wersji 2.5.1!

Answer 2

wpadłem na ten sam problem. Moja konfiguracja jest podobna do twojej (manifest dostawcy &). Sposób, w jaki to rozwiązałem, polegał na dodaniu babel-polyfill w punkcie wejścia mojego manifestu. Twój entry powinna wyglądać następująco:

entry: { 
    legacy_libs: './app/libs.js', 
    main: './app/main.js', 
    manifest: 'babel-polyfill' 
} 

To załaduje PolyFill dzięki czemu może być stosowany w pliku manifestu.

EDIT: Stosując ten powrócił kolejny błąd podczas budowania (chociaż to działa dobrze na dev-serwer):

ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (manifest)

Fixed go modyfikując punkty wejścia i CommonsChunkPlugin więc wygląda to tak:

entry: { 
    legacy_libs: './app/libs.js', 
    main: './app/main.js', 
    'babel-polyfill': 'babel-polyfill' 
}, 
... 
plugins: [ 
    ... 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'manifest', 
     chunks: 'babel-polyfill' 
    }), 
]