webpack：从指定入口文件中提取公共文件

tuomao 发布于2019-08-23 13:07 / 792人阅读

摘要：通过函数，指定三个入口文件为，同时我们还要设置为，表示指定三个入口文件中提取出的公共文件，最少要被三个不同的入口文件引用。所以就是从三个入口文件中提取公共的文件。从两个公共文件中，再提取公共部分先说一下，这是什么意思有个公共文件。

在不明白CommonsChunkPlugin的使用情况下，直接上手webpack4的splitChunks，实在是难上加难。为了能更好的理解splitChunks的使用，必须出个题目，练练手，才能从中有所收获（下面的题目不考虑实际应用场景）：

从指定入口文件中提取公共文件 CommonsChunkPlugin的实现：

entry: {
        index:"./src/index.js",
        index1:"./src/index1.js",
        index2:"./src/index2.js"
},
plugins: [
    new CommonsChunkPlugin({
        name:"common1",
        chunks:["index","index1","index2"]
    })
]

其中index和index1以及index2都是打包的入口文件。

splitChunks的实现：

optimization: {
        splitChunks: {
            chunks:"all",
            minSize: 0,
            cacheGroups: {
                common: {
                    minChunks: 3,
                    priority: -1,
                    name:"common",
                    chunks (chunk) {
                        // exclude `my-excluded-chunk`
                        return ["index","index1","index2"].includes(chunk.name);
                    }
                }
            }
        }
    }

在cacheGroups下面我们定义了一个common。通过chunks函数，指定三个入口文件为："index","index1","index2"，同时我们还要设置minChunks为3，表示指定三个入口文件中提取出的公共文件，最少要被三个不同的入口文件引用。所以就是从三个入口文件中提取公共的文件。

从两个公共文件中，再提取公共部分

先说一下，这是什么意思：

有6个公共文件a,b,c,d,e,f。

从a,b,c中提取其公共的部分x，从d,e,f中也提取公共部分y。

从x，y中再提取公共部分z。

下面给出webpack3 和webpack4下的处理

CommonsChunkPlugin的实现：

new CommonsChunkPlugin({
    name:"common1",
    chunks:["index","index1","index2"]
}),
new CommonsChunkPlugin({
    name:"common2",
    chunks:["app","app1","app2"]
}),
new CommonsChunkPlugin({
    name:"common3",
    chunks:["common1","common2"]
})

很清楚，先从"index","index1","index2"中提取公共文件‘common1’,再从"app","app1","app2"中提取公共文件‘common2’。最后从‘common1’和‘common2’中再提取出公共文件common3。

splitChunks的实现：

optimization: {
        runtimeChunk: "single",
        splitChunks: {
            chunks:"all",
            minSize: 0,
            cacheGroups: {
                common3: {
                  minChunks: 6,
                  priority: 1,
                  reuseExistingChunk: true
                },
                common2: {
                    minChunks: 3,
                    priority: -2,
                    name:"common2",
                    chunks (chunk) {
                        // exclude `my-excluded-chunk`
                        return ["app","app1","app2"].includes(chunk.name);
                    }

                },
                common1: {
                    priority: -1,
                    name: "common1",
                    minChunks: 3,
                    enforce: true,
                    chunks (chunk) {
                        return ["index","index1","index2"].includes(chunk.name);
                    }
                }
            }
        }
    }

我没有从文档中找到：提取公共文件之后再处理的方法。所以我用了另外一种方式：

先从6个文件中提取出公共的文件，即common3（common1和common2的公共文件）。

从"index","index1","index2"中提取common1

从"app","app1","app2"中提取common2

云服务器 GPU服务器 c从文件中读取数据从视频中提取音频 js从xls文件中读取数据 js从日期中提取时间

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99229.html

Webpack CommonsChunkPlugin 理解

摘要：未定义时使用作为文件名。表示公共创建所需要的所有模块的最小体积。如果设置为，公共的所有子模块将会被选中。使用来命名文件，实现文件缓存的功能。当文件内容发生变化，文件名会随之改变。代码中再次使用了，从中提取出了名为的运行时代码。 CommonsChunkPlugin配置简介最近读了一下webpack的文档，读到CommonsChunkPlugin这个插件，深深折服于webpack的强大...

YJNldm 2019-08-21 17:00 评论0 收藏0
webpack 填坑之路--提取独立文件(模块)

摘要：前言最近重新看了一遍提取公共文件的配置。这篇文章将以解决实际开发遇到的问题为核心，悉数利用提取独立文件模块的应用。利用插件是专门用来提取独立文件的，它主要是提取多个入口的公共模块。插入标签的这一步可以在打包好独立文件之前，就在模板中插入。前言最近重新看了一遍 webpack 提取公共文件的配置。原来觉得这东西是个玄学，都是凭感觉配置。这篇文章将以解决实际开发遇到的问题为核心，悉...

ZweiZhao 2019-08-21 17:30 评论0 收藏0
Webpack的坑位整理

摘要：在寻找相对路径的文件时会以为根目录，默认为执行启动时所在的当前目录。在文件被添加到依赖图中时，将其转换称为了模块。配置中的两个目标。仅限高级用途，默认情况下自动生成生成文件的文件名。webpack webpack现在是主要的打包工具了，现在网络上也有很多资料可以学习了。这里主要整理了一些基础概念，但没有所有的写，只是把之前遇到的问题记录了一下。本文的原文在我的博客中：github.com...

lidashuang 2019-05-23 17:34 评论0 收藏0
webpack4 系列教程(三): 多页面解决方案--提取公共代码

摘要：文件配置如下多页面应用注意属性其次打包业务中公共代码首先打包中的文件着重来看配置。个人网站原文链接系列教程三多页面解决方案提取公共代码这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

CarterLi 2019-08-23 10:49 评论0 收藏0
vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

摘要：而多页面应用的入口文件是所有需要用到的页面。单文件应用和多文件应用上，是大同小异的，区别就讨论到这里了。 1.前言这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教过我，我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好，写错了...

seal_de 2019-08-20 17:20 评论0 收藏0