Как правильно настроить webpack CommonsChunkPlugin для проекта?

Question

[Ninja Mate]

Пытаюсь настроить проект на реакте для подключения скриптов в зависимости от роли пользователя.
есть настройки продакшен сборки

entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },

в проекте есть src/admin/users.js который не является точкой входа, а подключается к одной из кнопок и соответственно собирается в bundle.js
Не получается встроить правильно вот этот кусок из документации

new CommonsChunkPlugin({
            name: "admin-commons",
            chunks: ["adminPageA", "adminPageB"]
        }),
        new CommonsChunkPlugin({
            name: "commons",
            chunks: ["pageA", "pageB", "admin-commons.js"],
            minChunks: 2
        })

как настроить без точки входа разбивку (или нужно сделать отдельным приложение в самом проекте)?

Comments

[Алексей Зуев]

что вы хотите настроить?

[Ninja Mate]

Алексей Зуев: хочу собрать файлы bundle.js и users.bundle.js, подключать их отдельными скриптами на странице, но при этом что бы они работали как одно приложение. Такое возможно?

[Алексей Зуев]

Ninja Mate: как подключается users.js?

[Ninja Mate]

Алексей Зуев: сейчас это часть приложения реакта
//App.js

import { Users } from './Admin/Users';
//в роутере
<Route  path="Users" component={Users}></Route>
//а потом как функцию использую в UserHome.js висит на навигации
<MenuItem onClick={()=>this.changeUsers()}>Manage Users</MenuItem>
{this.props.children}

бек на php wp и там хочу сделать запрос скрипта аналогичный bandel wp_enqueue_script...

[Алексей Зуев]

Ninja Mate: попробуйте подгружать через ensure. Будет отдельный файл

[Алексей Зуев]

Алексей Зуев:

require.ensure([], function(require) {
  var users = require('./admin/users');
}, 'users');

в конфиге

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[name].bundle.js'

[Алексей Зуев]

Ninja Mate: Чтобы сработал CommonsChunkPlugin, нужны иметь общий код в разных entry. Т.е. если есть две точки входа, в которых импортится ./Admin/Users, то вебпак попробует этот общий код выдернуть в отдельный чанк

[Ninja Mate]

Алексей Зуев: не могу справиться с проблемой использования Users как компонента

//Так работае
import { Users } from './Admin/Users';
//А так нет
require.ensure([], function(require) { var Users = require('./Admin/Users'); }, 'users');
//Как можно использовать его здесь? ReferenceError: Users is not defined
<Route  path="Users" component={Users}></Route>

[Ninja Mate]

Алексей Зуев: Как это при синтаксисе ES6 делать?

[Алексей Зуев]

Ninja Mate: ensure - асинхронный метод. Работать с этим модулем нужно внутри коллбэка

[Ninja Mate]

Алексей Зуев: может я как то не так сам Users декларирую? нашел туториал как раз по этой теме и сделал все как там указано https://youtu.be/x-puVr1L2Vg, файл подключается, но даже без ошибки ничего не происходит на странице. Вот такой компонент

import React, { Component } from 'react';

import { Input, Button, Collapse } from 'react-bootstrap';

export class Users extends Component {

    constructor(...args) {
        super(...args);

        this.state = {
            all_users:''
        };

    }
...
    }
    render() {
        return (
                <div>
                    <h1>Admin Panel</h1>
                                ...
                </div>
        );
    }
}

export default Users;

[Ninja Mate]

Алексей Зуев: в роуте вот так

<Route  path="Admin/Users" getComponent={
                                        (location,cb)=>require('./Admin')(location,cb)}></Route>

создал index.js в папки админ (по туториалу)

// Common js modular system with es5 syntax
module.exports = function(location, cb) {
    if (typeof require.ensure == 'function') {
        /* Asynchronous loading of a component that is inside of require.ensure */
        require.ensure([], (require) => {
            cb(null, require('./Users'))
        })


    } else {
        /* Server side synchronous loading */
        cb(null, require('./Users'));

    }
}

[Ninja Mate]

Алексей Зуев: заставил это все "работать" если добавить

render(<Users />, document.getElementById('admin'));

как все другие элементы в {this.props.children} роут не отправляет. Не подскажите как такое решить?

[Ninja Mate]

Алексей Зуев: Спасибо за помощь, все получилось, нужно было добавить экспорт модулей для Users