webpack4.x打包输出目录分文件夹
-
优化前
-
优化后
通过上面的优化前后对比,明显发现优化后的输出结构更加清晰;并且当我更新一个应用时,可以只发送对应的打包文件夹以及入口文件,减少发包体积;同时,对于chrome调试也可以利用文件夹的收纳快速定位源文件位置
解决方案
其实和webpack配置的关系很小,但这很小的一点却可以被利用!,这是我的输出配置
output: {
path: path.resolve(__dirname, ""),
filename: "static_dist/cdaPlugin/script/[name].min.js",
publicPath: "/mtex/",
chunkFilename: `static_dist/cdaPlugin/script/[name].[chunkhash:8].min.js`,
},
在上述配置中,在定义no entry chunk
的输出位置时(对应的位置在chunkFilename
),可以使用变量name
、chunkhash
等,其中name
变量对于我们分文件夹打包输出起到了关键作用!他的定义是
只要我们异步加载组件时,传入特定格式的chunkfilename
内容值会替换到这里的[name]
举个例子:
import(
/* webpackChunkName: "base/dateTimePicker" */ '../plugin2xCom/components/dateTimePicker/DatePicker.vue'
)
这里的webpackChunkName
值为base/dateTimePicker
,替换到出口的name
中就可以实现路径分隔符的效果(创建文件夹)。
引入的chunk分为异步引入和同步引入,异步引入用上述方法就可以控制,同步引入的chunk可以在插件NamedChunksPlugin
中添加路径实现,如下所示
new webpack.NamedChunksPlugin((chunk) => {
if (chunk.name) {
return `base/${chunk.name}`; // <- 这里
}
const modules = Array.from(chunk.modulesIterable);
if (modules.length > 1) {
const hash = require("hash-sum");
const joinedHash = hash(modules.map((m) => m.id).join("_"));
let len = nameLength;
while (seen.has(joinedHash.substr(0, len))) len++;
seen.add(joinedHash.substr(0, len));
return `base/chunk-${joinedHash.substr(0, len)}`; // <- 这里
} else {
return `base/${modules[0].id}`; // <- 这里
}
}),
至此原理部分就结束了,仅仅是更改输出的字符串写法即可!!!
如果是webpack5.x版本的话可以直接设置chunkfilename
为函数(有参数可以获取chunk信息,通过chunk信息分类输出结果即可,以上方法适用于4.x及以下)