Пакеты webpack одинаковы и выглядят как разметка?

Я создаю пакеты app.client.js и app.server.js, а также выполняю разделение кода и создаю vendor.chunk.js 1.chunk.js (это должен быть мой комплект компонентов, который загружается по запросу).

Когда я смотрю на них, все они разные, но когда я смотрю на них через DevTools, каждый комплект выглядит так, как на экране ниже:

enter image description here

Это часть моего renderer.js, которую я использую для выполнения res.send (~ html ~):

export default (req, res, next) => {
let context = {};
let modules = [];
const html = ReactDomServer.renderToString(
    <Capture report={moduleName => modules.push(moduleName)}>
        <Router context={context} location={req.url}>
            <App/>
        </Router>
    </Capture>
);

let bundles = getBundles(stats, modules);

return res.send(`
        <!doctype html>
        <html lang="en">
          <head>...</head>
          <body>
            <div id="app">${html}</div>
            <script src="../../../dist/vendor.chunk.js"></script>
            ${bundles.map(bundle => {
    return `<script src="${bundle.publicPath}"></script>`
}).join('\\n')}
            <script src="../../../dist/app.client.js"></script>
          </body>
        </html>
`);
}

Вы можете мне объяснить, почему он сломан? Спасибо!

UPD: после установки моего файла server / index.js следующим образом ...

const app = Express();
const Router = Express.Router();

Router.use(Express.static(
    'dist',
    { maxAge: '30d' }));
Router.use('*', serverRenderer);

app.use(Router);
preloadAll().then(() => {
    app.listen(PORT, (error) => {
        if (error) return console.log('ERROR', error.message);
        console.log('Server listening on ', PORT);
    });
});

... У меня другая проблема: 1.chunk.js и 1.chunk.js.map как-то дублированы, и devtools предупреждает меня об ошибке "Неожиданный токен:". Вот как это выглядит сейчас:

enter image description here

Это потому, что вы отвечаете на КАЖДЫЙ запрос с этой html-страницей. Даже запросы, которые пытаются получить файлы js. Перед этим вам нужно добавить еще один экспресс-обработчик. Вам подойдет статический обработчик: expressjs.com/en/starter/static-files.html.

Alon Bar 14.09.2018 01:16

@AlonBar у меня действительно есть Router.use('*', renderer); Router.use(Express.static( resolve(__dirname, 'dist'), { maxAge: '30d' }) );

Evgeny Kobzev 14.09.2018 07:25

Это работает для вас? Похоже, что порядок обработчиков неверный. Вы поместили статический обработчик после обработчика рендеринга, но ваши запросы никогда не доходят до него, потому что все они обрабатываются рендерером. Просто измените порядок и сначала поместите статический обработчик.

Alon Bar 14.09.2018 09:38

Кроме того, ведущие точки кажутся ненужными. Обратите внимание, что путь, выводимый bundle.path, не имеет их. Попробуйте изменить этот "../../../dist/vendor.chunk.js" на "/vendor.chunk.js".

Alon Bar 14.09.2018 09:46

@AlonBar Я перепробовал все варианты, но все одинаково :(

Evgeny Kobzev 14.09.2018 16:06

@AlonBar после некоторых настроек действительно работает, но теперь 1.chunk.js и 1.chunk.js.map дублируются ... один из них по-прежнему выглядит как html, а другой - как пакет (но у него есть «неожиданный токен: " ошибка)

Evgeny Kobzev 14.09.2018 16:42

Можете ли вы обновить свой вопрос, чтобы он отражал текущую ситуацию?

Alon Bar 14.09.2018 16:48

@AlonBar добавил обновление

Evgeny Kobzev 16.09.2018 00:37

Что ж, единственная проблема, которую я все еще вижу, заключается в том, что вам, вероятно, не хватает ведущего / в теге сценария, то есть <script src="/${bundle.publicPath}">. Если это не решает проблему, то другие области, которые стоит проверить, по крайней мере, для уверенности, - это ваш метод getBundles и, возможно, ваша конфигурация веб-пакета.

Alon Bar 17.09.2018 22:37
0
9
75
0

Другие вопросы по теме