I
I
Ivan2019-04-25 18:46:46
webpack
Ivan, 2019-04-25 18:46:46

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;

I use like this:
import asyncComponent from './application/AsyncComponent';
const Index = asyncComponent(() =>
  import('./application/pages/Index').then(module => module.default)
);

well, the webpack config itself:
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 question

Ask a Question

731 491 924 answers to any question