Question

我有一个应用程序，已经升级到Webpack，React和Redux的最新版本。当使用CombineReducers将两个以上的reducer添加到redux时，Webpack不会生成webpackBootstrap函数。我怀疑这可能是Webpack中的错误，但我不确定。我花了几个星期/几个小时来解决这个问题，但没有成功。此代码还可以与旧版本的webpack一起使用。我试图概述问题，以便可以在不将所有代码都放在此处的情况下重新创建它。任何想法。

更新：在更新到webpack（4.16.5）的最新版本后，源代码在任何情况下都不会生成webpackBootstrap。

GitHub Repository

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"
    }
}

我有3个减速器，我正在尝试使用combinneReducers添加到我的Redux Store中。如果仅添加两个reducer，则webpack会生成webpackBootstrap函数，但是如果添加第三个reducer，则webpack会停止生成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[\\/]/
                }
            }
        }
    }

};

module.exports = 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"],{

Answer 1

我张贴到Webpack组，并被告知splitChunks部分正确，应该将其删除。不幸的是，当在webpack 4.14上时，这种未命中配置给我不一致的输出，然后在升级到4.16.5之后，webpack不断生成没有webpackBootstrap功能的捆绑软件。删除splitChunks部分后，Webpack开始按预期的那样使用webpackBootstrap函数生成捆绑包。我将继续做进一步的研究，以了解splitChunks的工作原理。

当两个以上的reducer时，Webpack 4不会生成webpackBootstrap函数

1 个答案: