- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 webpack 4 中,vendor chunks 的名称如 vendors~main~secondary.js
,它们指的是与它们相关的块。现在,在 webpack 5 中, vendor 块名称是这样的:vendors-node_modules_react-dom_index_js.js
,这确实不太容易阅读和理解。
关于在使用 webpack 5 时如何回到 webpack 4 行为的任何提示?
我想我得对 splitChunks.name
做些事情,但我找不到合适的函数来做到这一点。
编辑
虽然@MrP01 的回答更彻底,并且更深入地了解如何使用 splitChunks.name
,这是我最终使用的一个简短片段,它使我能够回到确切的旧行为。
optimization: {
splitChunks: {
chunks: 'all',
name: (module, chunks, cacheGroupKey) => {
const allChunksNames = chunks.map((chunk) => chunk.name).join('~');
const prefix = cacheGroupKey === 'defaultVendors' ? 'vendors' : cacheGroupKey;
return `${prefix}~${allChunksNames}`;
},
},
},
最佳答案
我对 webpack 5 中的新命名方案的感觉非常相似。经过相当多的努力和测试,我想出了以下方法,将函数句柄传递给 filename
特性。
为了获得“更漂亮”的名字——这当然取决于每个人的个人判断——下面的函数规范化了名字并去掉了它们的大部分和不必要的部分。
function normalizeName(name) {
return name.replace(/node_modules/g, "nodemodules").replace(/[\-_.|]+/g, " ")
.replace(/\b(vendors|nodemodules|js|modules|es)\b/g, "")
.trim().replace(/ +/g, "-");
}
主要问题是被拆分的块的命名。当前的文档对此不是很明确,但是
config.optimization.splitChunks
中配置的 cacheGroup 设置,没有特定的缓存组,适用于所有缓存组。
module.exports = async () => {
return {
config: {
context: BASE,
entry: entrypoints,
output: {
path: path.resolve(`./.dev/bundles/${locale}`),
publicPath: `/static/bundles/${locale}/`,
filename: (pathData) => {
return normalizeName(pathData.chunk.name) + ".js";
},
chunkFilename: (pathData) => {
return normalizeName(pathData.chunk.id) + ".js";
},
},
devtool: false,
optimization: {
splitChunks: {
chunks: "all",
name(module, chunks, cacheGroupKey) {
const moduleFileName = module.identifier().split("/").reduceRight((item) => item);
// const allChunksNames = chunks.map((item) => item.name).join("-");
return normalizeName(moduleFileName.replace(/[\/]/g, "-"));
}
}
},
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
cssLoader,
postCssLoader
]
},
{
test: /\.(ttf|woff|eot|png|jpg|jpeg|svg)$/,
type: "javascript/auto",
loader: "file-loader",
options: {
name: (resourcePath, resourceQuery) => {
let ext = path.extname(resourcePath); // for instance ".jpg"
return normalizeName(path.basename(resourcePath).slice(0, -ext.length)) + ext;
}
}
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: (pathData) => normalizeName(pathData.chunk.name) + ".css",
chunkFilename: (pathData) => normalizeName(pathData.chunk.id) + ".css"
}),
],
};
};
这导致文件名超出名称限制,结果输出文件夹中的文件名更短更简洁。
关于Webpack 5 vendor block 命名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66986664/
使用 Webpack,支持将代码拆分为不同的包。其中一个选项是指定您想要选择作为分割点的一组模块。 取自 here : var webpack = require("webpack"); module
我正在编写一个依赖于某些导入的库包,但我不确定如何正确处理它。 让我从目录结构开始: go/src/github.com/ ├── developer A/ │ ├── project 1 │
我要在我的 Rails 应用程序中使用 git-submodules 跟踪依赖关系。到目前为止,我已经将 haml、shoulda 和 authlogic 之类的子模块添加到“vendor/plugi
Java 中的 java.vendor 和 java.vm.vendor 属性有区别吗? 看起来两者总是一样的。这是修正假设吗? 如果您知道这两个值不相同的情况,请列出它们。 编辑: 我试图弄清楚哪个
例子:“在测试/虚拟中销售 Rails 应用程序”“为生产销售 Rails 的推荐方法是什么?” 最佳答案 Vendoring 是将所有第 3 方项目(例如插件、gem 甚至 rails)移动到 /v
将我的 Go 服务部署到 Google AppEngine(标准)时,我收到一条错误,描述未找到模块版本,但编译一切正常。 模块位于私有(private) Github 实例上,并 check out
这个问题在这里已经有了答案: Error "can't load package: package my_prog: found packages my_prog and main" (3 个答案)
我是Laravel的新手,我已经安装了PHP,并且我已经在本地服务器上使用过EasyPHP。我也安装了Composer,这里可能会有问题,所以我首先将其安装在PHP低于V8的默认文件夹中。然后我用8.
我正在尝试将一个 Go 项目转换为新的模块标准,但我在一个依赖项上遇到了问题。 该存储库提供了一个库(在本例中为 golang.org/x/net/html)以向该库添加一些功能;这意味着它已经修改了
我在玩 create-react-app和目前的代码拆分。它工作得非常好,直到我开始导入供应商库,这些库将包含在每个块中。 这是我目前的做法: App.js const HomePage = Load
Closed. This question is opinion-based。它当前不接受答案。 想改善这个问题吗?更新问题,以便editing this post用事实和引用来回答。 在6个月前关闭
以下两者似乎都有效: element.style.WebkitFlex = 1; element.style.webkitFlex = 1; 但是哪种语法是标准的? 最佳答案 第一个, eleme
我正在构建来自 github.com/tarm/serial 的示例程序. 案例 1:如果将上述 repo check out 到 $GOPATH/src/github.com/tarm/serial
我需要为构建期间使用的工具使用“vendoring”(github.com/mjibson/esc 和 golang.org/x/tools/cmd/stringer) 以满足我们的来源管理要求。 我
在生产构建我的 vue.js 应用程序后,我看到我的 block vendor 文件太大,这对 Web 性能有影响,屏幕如下: 如何减小此文件的大小? 我尝试通过延迟加载在我的 router.js 中
我必须修改 vendor 文件中的结构。假设这是结构体在 vendor 文件中的方式 type sampleStruct struct { sampleStringvar1 str
我正在使用 styled-components我的 React 项目中的库。 我想在开发期间禁用供应商前缀的生成。 在这么多相似的属性中找到一个指定的 CSS 属性来切换它并在浏览器的开发工具中测试是
我想了解在复习 go 模块和 vendor 目录时遇到错误的原因。显然,在主模块和 vendor 文件夹中具有相同的包会导致错误,我想了解原因。据我了解,如果有go.mod go甚至不应该检查 ven
究竟什么是“贩卖”?你如何定义这个词? 它在不同的编程语言中意味着相同的事情吗?从概念上讲,不看确切的实现。 最佳答案 基于 this answer 定义 here为: Vendoring is th
我有一个具有多个入口点的应用程序。但所有入口点都使用相同的第三方库。我想将这些第三方库单独放在一个单独的文件中。当我按照 documentation 中的步骤操作时,它将我的应用程序代码也移动到第三个
我是一名优秀的程序员,十分优秀!