vhuk1802
@vhuk1802

Как с помощью webpack объеденить все бандлы?

есть асинхронный компонент, который подгружает другие компоненты:
На клиенте всё работает хорошо, но когда использую Ssr, то ругаеться на
var parentJsonpFunction = window["webpackJsonp"];
Вопрос: как правильно настроить webpack, чтобы на клиенте код разбивался, а на сервере был один большой файл?
import React, {Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {loadComponent} from "./actions/AjaxDataActions";
function asyncComponent(getComponent) {

class AsyncComponent extends Component {
		constructor(props) {
			super(props);
			this.state = {Component: AsyncComponent.Component};
		}
		componentWillMount() {
			if ( !this.state.Component ) {
				this.props.loadComponent(true);
				getComponent().then(Component => {
					AsyncComponent.Component = Component;
					this.props.loadComponent(false);
					this.setState({Component})
				})
			}
		}
		render() {
			const {Component} = this.state;
			if (Component)
				return <Component {...this.props} />;
			return null;
		}
	}
	return connect(state => ({
		params: state.ajaxData
	}), matchDispatchToProps)(AsyncComponent);
}
function matchDispatchToProps(dispatch) {
	return bindActionCreators({loadComponent: loadComponent}, dispatch)
}
export default asyncComponent;


использую вот так:

import asyncComponent from './application/AsyncComponent';
const Index = asyncComponent(() =>
	import('./application/pages/Index').then(module => module.default)
);


ну и сам конфиг webpack:
const uniqid = require("uniqid");
let mix = require("laravel-mix");

mix
  .react("resources/assets/js/app-server.js", "public/js")
  .sass("resources/assets/sass/app.scss", "public/css")
  .version();

mix.webpackConfig({
  output: {
      filename: "js/app.js",
      chunkFilename: "js/[name]." + uniqid() + ".bundle.js",
      pathinfo: true
  }
});
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы