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

tuomao 發布于2019-08-23 13:07 / 913人閱讀

摘要：通過函數，指定三個入口文件為，同時我們還要設置為，表示指定三個入口文件中提取出的公共文件，最少要被三個不同的入口文件引用。所以就是從三個入口文件中提取公共的文件。從兩個公共文件中，再提取公共部分先說一下，這是什么意思有個公共文件。

在不明白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從日期中提取時間

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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