У меня есть приложение, которое я обновил до последних версий Webpack, React и Redux. Webpack не генерирует функцию webpackBootstrap, когда в избыточность добавляется более двух редюсеров с помощью combReducers. Я подозреваю, что это может быть ошибка в Webpack, но я не уверен. Я потратил несколько недель/часов на поиски этой проблемы, но безуспешно. Также этот код работал со старой версией webpack. Я попытался обрисовать проблему, чтобы ее можно было воссоздать, не помещая здесь весь код. Любые идеи.
обновление: после обновления до последней версии на webpack (4.16.5) исходный код не будет генерировать webpackBootstrap ни при каких условиях.
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"],{