0

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

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

GitHub 存储库

包.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 添加到我的 redux Store 中的三个 Reducer。如果我只添加两个 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 = 环境；

我的三个减速器很简单：

反馈减速器.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"],{
4

1 回答 1

0

我发布到 Webpack 组，并被告知 splitChunks 部分是正确的，应该将其删除。不幸的是，当我在 webpack 4.14 上以及升级到 4.16.5 之后，这个错过的配置给了我不一致的输出，webpack 不断生成没有 webpackBootstrap 功能的包。删除 splitChunks 部分后，webpack 开始按预期使用 webpackBootstrap 函数生成包。我将继续做更多的研究来理解 splitChunks 是如何工作的。

于 2018-08-19T18:59:35.837 回答