webpack - 使用 splitChunks.cacheGroups 会使 webpack 5 中的自定义库未定义
问题描述
我们正在尝试使用 webpack 的optimization.splitChunks.cacheGroups
功能对特定文件进行分块,但是当我们执行时,我们在输出中定义的库总是未定义的。
如果我们删除我们能够访问的 cacheGroups 对象window.foo
在本地,我们使用 HTMLWebpackPlugin 将所有需要的块按顺序注入到 index.html 中,以便一切正常。
但是在生产中,我们使用动态页面,并且只将我们的捆绑client.js
文件添加到页面中。该文件不会调用我们认为它应该调用的生成块。我们也有其他的缓存组,但为了简单起见,我认为我只是使用供应商。
我一直在尝试许多不同的优化配置,但没有任何进展,我还发现了其他一些有这个问题的人,但没有真正可行的解决方案或解决方法的例子,所以我在这里联系:
是否有我缺少的基本配置步骤window.foo
不等于undefined
?
如果这不可能,我是否需要以client.js
某种方式将生成的块导入主文件?注意:我尝试从 dist put 引用它们永远无法解析路径?
感谢您的任何帮助,您可以提供。
const webpack = require('webpack')
const path = require('path')
// Webpack plugins
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// Directories
const DEV_DIR = path.resolve(__dirname, '../src')
const PROD_DIR = path.resolve(__dirname, '../dist')
const CYPRESS_DIR = path.resolve(__dirname, '../cypress')
module.exports = {
context: DEV_DIR,
entry: { client: './js/client/client.js' },
output: {
path: PROD_DIR,
filename: 'js/[name].js',
chunkFilename: 'js/[name].[contenthash].js',
clean: true,
library: {
name: 'foo',
type: 'var'
}
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 0,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor'
}
}
}
},
module: {
rules:
[
{
test: /\.js$/,
exclude: [
/node_modules/,
CYPRESS_DIR
],
loader: 'babel-loader',
options: { plugins: ['lodash'] }
}
]
},
plugins: [
new LodashModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: 'html/global.html',
filename: 'index.html',
inject: false
}),
],
resolve: {
extensions: ['.js', '.vue', '.json']
}
}
解决方案
推荐阅读
- python - 如何将ajax发送的blob转换为python烧瓶中的音频文件
- sql - 如何使用运行总计加快选择查询?
- graphql - 使用 Graphql 查询 API 时出现“无法返回 null”错误?
- git - 区分工作树文件夹的git命令是什么
- amazon-web-services - 如何使用 CloudWatch 事件将 CodeCommit 标签名称传递给 CodePipeline
- javascript - 在普通 JS 脚本之前和之后加载 ES6 模块依赖项
- swift - Firebase 按字母顺序获取数据
- docker - 'artifactory' 的不受支持的 docker v2 存储库请求是什么意思
- javascript - 错误 [Vue 警告]:选项“el”只能在使用 `new` 关键字创建实例期间使用
- c++ - 在特化模板的同时从基类继承类模板的正确方法