为了优化我的应用程序的页面加载时间,我将包分成两个包:webpack-bundle
(这包含我的代码)和vendor-bundle
(包含节点模块中的所有内容)。但是当我的用户从访问我的网站时,我开始收到一些错误。他们会得到错误,比如“Object.entries”是未定义的,“Object.values”是未定义的。显然,我需要在我的其他包之前包含babel-polyfill
并加载它。但是,当我的条目是一个对象时,我不知道该如何做。
这是旧的条目。它是一个数组(在我拆分包之前):
const config = {
"entry": [
"es5-shim/es5-shim",
"es5-shim/es5-sham",
"url-search-params-polyfill",
"@babel/polyfill",
"./app/registration"
],
这是我当前的webpack.config
,在这里,我将条目更改为对象并使用splitChunks
。这会把两包放出来。
const config = {
"entry": {
"webpack-bundle": "./app/registration"
},
"output": {
filename: "[name].js",
path: pathLib.resolve(__dirname, "../app/assets/webpack"),
},
"module": {
"rules": [
{
"test": /\.(svg)$/,
"use": [
{
"loader": "url-loader",
"options": {"limit": 8192}
}
]
},
{
"test": /\.css$/,
"use": [
"style-loader",
"css-loader"
]
},
{
"test": require.resolve("react"),
"use": {
"loader": "imports-loader",
"options": {
"sham": "es5-shim/es5-sham",
"shim": "es5-shim/es5-shim"
}
},
},
{
"exclude": /node_modules/,
"test": /\.jsx?$/,
"use": {
"loader": "babel-loader",
"options": {
"plugins": [
"@babel/plugin-proposal-class-properties",
["@babel/plugin-proposal-decorators", {"legacy": true}],
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-json-strings",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-transform-react-jsx"
],
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
}
}
],
},
"plugins": [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
}),
new UglifyJsPlugin()
],
"optimization": {
"splitChunks": {
"cacheGroups": {
"vendor": {
"test": /node_modules/,
"chunks": "all",
"name": "vendor-bundle"
}
}
}
},
"resolve": {
"alias": {
"Lib": pathLib.resolve(__dirname, "app/lib/"),
"Shared": pathLib.resolve(__dirname, "app/shared/")
},
"extensions": [".js", ".jsx"]
}
};
module.exports = config;
巴伯尔
{
"plugins": [
"@babel/plugin-proposal-class-properties",
["@babel/plugin-proposal-decorators", {"legacy": true}],
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-json-strings",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-transform-react-jsx",
[ "@babel/plugin-transform-runtime", {"regenerator": true}]
],
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
我试着用这种方式重写条目,但没有用:
"entry": {
"polyfill-bundle": "@babel/polyfill",
"es5-shim-bundle": "es5-shim/es5-shim",
"es5-sham-bundle": "es5-shim/es5-sham",
"webpack-bundle": "./app/registration"
},
babel/polyfill
已加载并正在正确编译?我应该将它添加到条目中还是ProvidePlugin中?babel/polyfill
不应该已经包含在vendor-bundle
中了吗?发布于 2019-07-31 14:42:28
我建议用这个核心-js代替babel-poly填充。安装core-js,创建一个.babelrc文件并将其放入其中。
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
],
"@babel/preset-react"
]
}
webpack.conf.js
const config = {
"entry": {
"webpack-bundle": "./app/registration"
},
"output": {
filename: "[name].js",
path: pathLib.resolve(__dirname, "../app/assets/webpack"),
},
"module": {
"rules": [
{
"test": /\.jsx?$/,
"exclude": /node_modules/,
"use": {
"loader": "babel-loader",
}
}
},
{
"test": /\.css$/,
"use": [
"style-loader",
"css-loader"
]
},
{
"test": /\.(svg)$/,
"use": [{
"loader": "url-loader",
"options": {
"limit": 8192
}
}]
},
],
},
"plugins": [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
}),
new UglifyJsPlugin()
],
"optimization": {
"splitChunks": {
"cacheGroups": {
"vendor": {
"test": /node_modules/,
"chunks": "all",
"name": "vendor-bundle"
}
}
}
},
"resolve": {
"alias": {
"Lib": pathLib.resolve(__dirname, "app/lib/"),
"Shared": pathLib.resolve(__dirname, "app/shared/")
},
"extensions": [".js", ".jsx"]
}
};
module.exports = config;
package.jon
"browserslist": [
"last 2 version",
"> 1%",
"not dead"
],
上面的条目将为包括ie10和ie11在内的浏览器添加多填充。要检查这一点,请添加debug: true
。控制台将准确显示已添加的内容、文件等。
{
debug: true,
"useBuiltIns": "usage",
"corejs": 3
}
发布于 2019-07-30 21:22:38
尝试像这样将babel-polyfill
添加到条目中,下面是指向文档的链接。
const config = {
"entry": {
"webpack-bundle": ["babel-polyfill","./app/registration"]
},
...
https://stackoverflow.com/questions/57279455
复制相似问题