Блог

Главная - Вопросы по программированию - Почему загрузка фрагментов webpack игнорируется на порт devServer?

Почему загрузка фрагментов webpack игнорируется на порт devServer?

#reactjs #webpack #webpack-dev-server #webpack-4

#reactjs #webpack #webpack-dev-server #webpack-4

Вопрос:

Я пытаюсь использовать динамический импорт с помощью React.lazy. Код довольно прост

 import React, { Component, Suspense, lazy, } from 'react';

const BlazyComponent = lazy(() => {

    return import('./blazy');
});

class Main extends Component {

    render () {

        return (<Suspense fallback={<div>Loading...</div>}>
            <BlazyComponent/>
        </Suspense>);
    }
}

export default Main;

Итак, когда я запускаю Webpack devServer, консоль браузера выдает ошибку

 index.js:114 Uncaught (in promise) Error: Loading chunk 0 failed.
(missing: http://domain/build/0.js)
    at HTMLScriptElement.onScriptComplete (index.js:114)

Как я вижу, пакеты index.css и index.js успешно загружены из http://domain:8080/build/test/index.css и http://domain:8080/build/test/index.js .

Но фрагмент загружается с http://domain/build/0.js (webpack devServer игнорирует порт). Как я могу принудительно загрузить фрагмент из http://domain:8080/build/0.js .

Конфигурация Webpack

 entry: {

    'test/index': [ 'babel-polyfill', './resources/assets/modules/test/index', ],
},
output: {

    path: path.resolve(__dirname, './public/build/'),
    publicPath: '/build/',
    filename: '[name].js',
    chunkFilename: '[name].js',
},
...
devServer: {

    host: 'domain',
    port: 8080,
},

PS. Я знаю, что могу использовать переменные окружения, но ищу более элегантное решение

Ответ №1:

Попробуйте изменить свой publicPath на http://domain:8080/build/ ?

Смотрите https://webpack.js.org/guides/public-path/#environment-based

Комментарии:

1. Хорошо, это работает нормально, но требует управления publicPath переменными среды для разработки и производства. Итак, я думаю, что есть более элегантное решение 😉

2. Я обновил свой ответ. Вы можете использовать базовую среду env ASSET_PATH или через __webpack_public_path__ .