Webpack 4 не генерирует функцию webpackBootstrap, когда более 2 редукторов

У меня есть приложение, которое я обновил до последних версий Webpack, React и Redux. Webpack не генерирует функцию webpackBootstrap, когда в избыточность добавляется более двух редюсеров с помощью combReducers. Я подозреваю, что это может быть ошибка в Webpack, но я не уверен. Я потратил несколько недель/часов на поиски этой проблемы, но безуспешно. Также этот код работал со старой версией webpack. Я попытался обрисовать проблему, чтобы ее можно было воссоздать, не помещая здесь весь код. Любые идеи.

обновление: после обновления до последней версии на webpack (4.16.5) исходный код не будет генерировать webpackBootstrap ни при каких условиях.

Репозиторий GitHub

package.json

{
    "name": "webpack4react",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "node bin/www",
        "build": "webpack --mode development --watch --progress"
    },
    "dependencies": {
        "@material-ui/core": "^1.3.1",
        "axios": "^0.18.0",
        "body-parser": "^1.18.3",
        "cookie-parser": "~1.4.3",
        "debug": "~2.6.3",
        "express": "^4.16.3",
        "history": "^4.7.2",
        "jade": "~1.11.0",
        "less-middleware": "^3.0.1",
        "morgan": "^1.9.0",
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "react-redux": "^5.0.7",
        "redux": "^4.0.0",
        "redux-logger": "^3.0.6",
        "redux-promise-middleware": "^5.1.1",
        "redux-thunk": "^2.3.0",
        "serve-favicon": "~2.4.2",
        "webpack-visualizer-plugin": "^0.1.11"
    },
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.14.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.4"
    }
}

У меня есть три редуктора, которые я пытаюсь добавить в свой редукционный магазин с помощью combinneReducers. Если я добавляю только два редуктора, веб-пакет генерирует функцию webpackBootstrap, однако, если я добавляю третий редуктор, веб-пакет перестает генерировать функцию webpackBootstrap и помещает код в стек webpackJsonp.

Я создал очень простое приложение, которое создает два пакета. один комплект — это nodeModules (React, Redux и т. д.). Другой пакет — это код моего приложения.

webpack.conif.js

const path = require('path');
const visualizer = require('webpack-visualizer-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

const env = {
    mode:'development',
    devtool:'false',
    entry:{
        core: './public/javascripts/core/index.js',
        nodeModules:[
            'react',
            'react-dom',
            '@material-ui/core'
        ]
    },
    output:{
        filename:'[name]/bundle.js',
        path: path.join(__dirname, '/public/dist/')
    },
    module:{
        rules:[{
            test: /\.js$/,
            exclude: /node_modules/,
            use:{
                loader:'babel-loader'
            }
        }]
    },
    plugins:[
        new htmlWebpackPlugin({
            template: './public/indexTemplate.html'
        }),
        new visualizer({filename:'./webpackStats.html'})
    ],
    optimization:{
        splitChunks:{
            chunks:"all",
            cacheGroups:{
                nodeModules:{
                    name:"nodeModules",
                    test:/[\\/]node_modules[\\/]/
                },
                core:{
                    name:"core",
                    test:/[\\/]core[\\/]/
                }
            }
        }
    }

};

модуль.экспорт = env;

Мои три редуктора очень просты:

feedbackReducer.js

import stateStorage from '../../util/stateStorage';

var feedbackReducer = (state = stateStorage.get('footerState', {message: '',}), action) => {
    let newState = JSON.parse(JSON.stringify(state));
    switch(action.type){
        case 'FEEDBACK_POST_MESSAGE': {
            newState.message = action.payload;
            break;
        }
    }
    return(newState);
};

export default feedbackReducer;

menuReducer.js

import stateStorage from '../../util/stateStorage';

var menuReducer = (state = stateStorage.get('menuState', {menu: {}, drawerOpen: false, drawerDocked: false}), action) => {
    let newState = JSON.parse(JSON.stringify(state));
    switch(action.type){
        case 'SET_MENU_STATE':{
            newState.menu = action.payload.menu;
            state = newState;
            break;
        }
        case 'OPEN_MENU_DRAWER':{
            newState.drawerOpen = true;
            break;
        }
        case 'CLOSE_MENU_DRAWER':{
            newState.drawerOpen = false;
            break;
        }
        case 'DOCK_MENU_DRAWER':{
            newState.drawerDocked = true;
            break;
        }
        case 'UNDOCK_MENU_DRAWER':{
            newState.drawerDocked = false;
            break;
        }
    }
    return(newState);
};

export default menuReducer;

newReducer.js

import stateStorage from '../../util/stateStorage';

var newReducer = (state = stateStorage.get('newReducerState', {message: '',}), action) => {
    let newState = JSON.parse(JSON.stringify(state));
    switch(action.type){
        case 'FEEDBACK_POST_MESSAGE': {
            newState.message = action.payload;
            break;
        }
    }
    return(newState);
};

export default newReducer;

вы заметите, что функции feedbackReducer и newReducer идентичны, кроме названия.

Если я использую следующий код для моей функции coreReducers:

import feedbackReducer from './feedbackReducer';
import menuReducer from './menuReducer';
import newReducer from './newReducer';

function coreReducers(){
    var reducerList = {
        menuState: menuReducer,
        newReducer: newReducer
    };
    return(reducerList);
}

export default coreReducers;

webpack правильно генерирует функцию webpackBootrap. Однако, если я изменю функцию coreReducers на:

import feedbackReducer from './feedbackReducer';
import menuReducer from './menuReducer';
import newReducer from './newReducer';

function coreReducers(){
    var reducerList = {
        footerState: feedbackReducer,
        menuState: menuReducer,
        newReducer: newReducer
    };
    return(reducerList);
}

export default coreReducers;

Webpack перестает генерироваться

(function(modules) { // webpackBootstrap

и начинает генерировать

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["core"],{

person Stu    schedule 12.08.2018    source источник
comment
@ Джоэл, проблема с вашим редактированием в том, что оно не представляет имя функции в том виде, в каком оно появляется в сгенерированном коде. webpack сгенерирует анонимную функцию, а затем прокомментирует ее как webpackBootstrap. ваше редактирование может спутать его с продуктом, известным как Bootstrap.   -  person Stu    schedule 14.08.2018


Ответы (1)


Я отправил сообщение в группу Webpack, и мне сказали, что раздел splitChunks указан правильно и его следует удалить. К сожалению, эта конфигурация промаха давала мне непоследовательный вывод, когда в webpack 4.14, а затем после обновления до 4.16.5 webpack постоянно генерировал пакет без функции webpackBootstrap. После удаления раздела splitChunks веб-пакет начал генерировать бандл с функцией webpackBootstrap, как и ожидалось. Я буду продолжать проводить дополнительные исследования, чтобы понять, как работает splitChunks.

person Stu    schedule 19.08.2018