gpt4 book ai didi

javascript - 使用 webapack 4 为每个条目创建 vendor.bundle

转载 作者:行者123 更新时间:2023-11-30 14:14:44 27 4
gpt4 key购买 nike

我想用 webapack4 为每个条目制作 vendor.bundle。
示例。

src/
pages/
home/
index.js
list/
index.js

构建后。

dist/
pages/
home/
index.bundle.js
home.vendor.bundle.js
list/
index.bundle.js
list.vendor.bundle.js

如何配置拆分块?
当前配置。

const path = require('path')

module.exports = {
mode: 'development',

entry: {
'/pages/home/index': path.resolve(__direname, 'src', 'pages', 'home', 'index.js'),
'/pages/list/index': path.resolve(__direname, 'src', 'pages', 'list', 'index.js'),
},

output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},

// I am troubled with the setting here.
optimization: {
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
enforce: true,
name: 'vendor'
},
}
}
},
}

我试图用一个函数而不是一个字符串来处理名称,但它没有用。

谢谢。

最佳答案

解决了这个问题。

const path = require('path')
module.exports = {
mode: 'development',

entry: {
'/pages/home/index': path.resolve(__direname, 'src', 'pages', 'home', 'index.js'),
'/pages/list/index': path.resolve(__direname, 'src', 'pages', 'list', 'index.js'),
},

output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},

optimization: {
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
cacheGroups: {
'top-vendor': {
test: /[\\/]node_modules[\\/]/,
chunks: chunk => chunk.name === '/pages/home/index',
enforce: true,
name: `${path.dirname('/pages/home/index')}/vendor`
},
'list-vendor': {
test: /[\\/]node_modules[\\/]/,
chunks: chunk => chunk.name === '/pages/list/index',
enforce: true,
name: `${path.dirname('/pages/list/index')}/vendor`
},
}
}
},
}

关于javascript - 使用 webapack 4 为每个条目创建 vendor.bundle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53778450/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com