当超过 2 个减速器时,Webpack 4 不生成 webpackBootstrap 函数
Webpack 4 not generating the webpackBootstrap function when more than 2 reducers
我有一个应用程序已升级到最新版本的 Webpack、React 和 Redux。当使用 combineReducers 将两个以上的 reducer 添加到 redux 时,Webpack 不会生成 webpackBootstrap 函数。我怀疑这可能是 Webpack 中的错误,但我不确定。我花了几个 weeks/hours 来解决这个问题,但没有成功。此代码也适用于旧版本的 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 添加到我的 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 = 环境;
我的三个reducer很简单:
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"],{
我发布到 Webpack 组,并被告知 splitChunks 部分是正确的,应该将其删除。不幸的是,这个错误的配置在 webpack 4.14 上给我带来了不一致的输出,然后在升级到 4.16.5 之后,webpack 不断生成没有 webpackBootstrap 函数的包。删除 splitChunks 部分后,webpack 开始按预期生成带有 webpackBootstrap 函数的包。我将继续进行更多研究以了解 splitChunks 的工作原理。
我有一个应用程序已升级到最新版本的 Webpack、React 和 Redux。当使用 combineReducers 将两个以上的 reducer 添加到 redux 时,Webpack 不会生成 webpackBootstrap 函数。我怀疑这可能是 Webpack 中的错误,但我不确定。我花了几个 weeks/hours 来解决这个问题,但没有成功。此代码也适用于旧版本的 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 添加到我的 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 = 环境;
我的三个reducer很简单:
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"],{
我发布到 Webpack 组,并被告知 splitChunks 部分是正确的,应该将其删除。不幸的是,这个错误的配置在 webpack 4.14 上给我带来了不一致的输出,然后在升级到 4.16.5 之后,webpack 不断生成没有 webpackBootstrap 函数的包。删除 splitChunks 部分后,webpack 开始按预期生成带有 webpackBootstrap 函数的包。我将继续进行更多研究以了解 splitChunks 的工作原理。