webpack4.x打包输出目录分文件夹

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及以下）