Answer the question
In order to leave comments, you need to log in
How to combine all bundles using webpack?
there is an asynchronous component that loads other components:
Everything works fine on the client, but when I use Ssr, I complain about
var parentJsonpFunction = window["webpackJsonp"];
Question: how to properly configure webpack so that the code is broken on the client, and there is one large file on the server?
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)
);
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
}
});
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question