webpack 从指定入口文件中提取公共文件的方法

在不明白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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 细说webpack源码之compile流程-入口函数run

    Webpack是目前基于React和Redux开发的应用的主要打包工具.我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack. 本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now(); const onCompiled = (err, compilation) => { /**/ }; this.applyPluginsAsync(

  • webpack多入口文件页面打包配置详解

    webpack多入口文件页面打包配置详解

    大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也不尽是如此,有时候也会碰到多页面的项目,而且以我的经验来看,这种情况出现的频率还不低,例如项目比较大,无法进行全局的把握,或者项目需要多次的更新迭代等,都适合做成多页面程序,这就涉及到了 webpack的多页面文件的打包配置问题. 手动配置 单页应用程序和多页应用程序的 webpack配置文件其实绝大部分都还是相同的,只不过多页的配置需要在单页配置的基础上顾及到多个页面罢了,loader.ou

  • webpack多入口多出口的实现方法

    webpack是一个优秀的打包平台, 可以把sass, 图片, 字体等静态资源全部打包到js中 作者最近在改造一个传统的静态网站, 为了减少http请求, 其中一个策略就是,把单个静态网页对应的多个静态资源(如字体, css, 图片, js), 打包输出到一个js文件中, 然后让每个html与对应独立的js相关联就可以了 我在网上找了webpack配置的相关资料, html与js的对应关系都是, "一对一", "多对一", 但很少有"多对多"的实

  • 基于 webpack2 实现的多入口项目脚手架详解

    简介 基于 webpack2 实现的多入口项目脚手架,主要使用 extract-text-webpack-plugin 实现 js .css 公共代码提取,html-webpack-plugin 实现 html 多入口,less-loader 实现 less 编译,postcss-loader 配置 autoprefixer 实现自动添加浏览器兼容前缀,html-withimg-loader 实现 html 内引入图片版本号添加和模板功能,babel-loader 实现 ES6 转码功能, ha

  • 详解webpack 多页面/入口支持&公共组件单独打包

    详解webpack 多页面/入口支持&公共组件单独打包

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • 详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

    最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack 1.webpack一下自己就

  • 详解webpack 多入口配置

    详解webpack 多入口配置

    同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 npm run dev,首先我们要理解webpack打包主要是针对js,查看下面生成的配置,首页是index.html,模版用的index.html,入口文件用的mian.js //file build/webpack.base.conf.js //entry 配置 module.exports =

  • 详解webpack4多入口、多页面项目构建案例

    详解webpack4多入口、多页面项目构建案例

    趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi

  • webpack 从指定入口文件中提取公共文件的方法

    在不明白CommonsChunkPlugin的使用情况下,直接上手webpack4的splitChunks,实在是难上加难.为了能更好的理解splitChunks的使用,必须出个题目,练练手,才能从中有所收获(下面的题目不考虑实际应用场景): 从指定入口文件中提取公共文件 CommonsChunkPlugin的实现: entry: { index:'./src/index.js', index1:'./src/index1.js', index2:'./src/index2.js' }, plu

  • C++从文件中提取英文单词的实现方法

    C++从文件中提取英文单词的实现方法

    目录 思路: 一:读取一行,去除该行标点符号 二:截取单词 三:将拿到的每一个单词都放在链表中 首先,要准备好words.txt(英文文章)置于工程目录下 思路: 1.打开文件 2.读取每一行 3.找到特殊的标点符号的位置,进行删除. 4.根据空格截取单词 find(" "); 5.将拿到的每一个单词放在链表中 一:读取一行,去除该行标点符号 #include<iostream> using namespace std; #include<fstream> #i

  • python实现从pdf文件中提取文本,并自动翻译的方法

    针对Python 3.5.2 测试 首先安装两个包: $ pip install googletrans $ pip install pdfminer3k googletrans会提供一个命令translate,这个命令会调用google translate api执行自动翻译: pdfminer3k会提供一个工具脚本pdf2txt.py: $ pdf2txt.py xxx.pdf 从stackoverflow搜索到可以去除页眉和页脚的命令(强烈推荐): 使用Ubuntu提供的pdftotext

  • Angular5中提取公共组件之radio list的实例代码

    本文给大家说一下Radio List的公共组件提取. Radio List组件提取起来很方便,不想Checkbox那么复杂. radio-list.component.ts import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { RadioItem } from '../../model/radio'; import { NgModel } from '@angular/fo

  • 教你使用Python从文件中提取IP地址

    教你使用Python从文件中提取IP地址

    目录 算法 : 代码 输出 : 代码: 输出 : 补充:python提取一段字符串中的ip地址 总结 让我们看看如何使用 Python 从文件中提取 IP 地址. 算法 : 为正则表达式导入 re 模块. 使用 open() 函数打开文件. 读取文件中的所有行并将它们存储在列表中. 声明 IP 地址的模式.正则表达式模式是: r'(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})' 对于列表中的每个元素,使用 search() 函数搜索模式,将 IP 地址存储在列表中. 显

  • Python输出PowerPoint（ppt）文件中全部文字信息的方法

    本文实例讲述了Python输出PowerPoint(ppt)文件中全部文字信息的方法.分享给大家供大家参考.具体分析如下: 下面的代码依赖于windows com,所以必须在机器上安装PowerPoint才能用,可以将PPT文件中的所有纯文本信息进行输出到指定的文件,非常实用. import win32com from win32com.client import Dispatch, constants ppt = win32com.client.Dispatch('PowerPoint.App

  • Java实现从Html文本中提取纯文本的方法

    1.应用场景:从一份html文件中或从String(是html内容)中提取纯文本,去掉网页标签: 2.代码一:replaceAll搞定 //从html中提取纯文本 public static String StripHT(String strHtml) { String txtcontent = strHtml.replaceAll("</?[^>]+>", ""); //剔出<html>的标签 txtcontent = txtcont

  • Python查找文件中包含中文的行方法

    前言 近几天在做多语言版本的时候再次发现,区分各种语言真的是一件比较困难的事情,上一次做中文提取工具的就花了不少时间,这次决定用python试一试,结果写起来发现真是方便不少,自己整理了一下方便以后查找使用. 代码 #!/usr/bin/env python3 # -*- coding: utf-8 -*- # find the line of containing chinese in files __author__ = 'AlbertS' import re def start_find_

  • Python实现从文件中加载数据的方法详解

    Python实现从文件中加载数据的方法详解

    前几篇都是手动录入或随机函数产生的数据.实际有许多类型的文件,以及许多方法,用它们从文件中提取数据来图形化. 比如之前python基础(12)介绍打开文件的方式,可直接读取文件中的数据,扩大了我们的数据来源.下面,将展示几种方法. 我们将使用内置的 csv 模块加载CSV文件 CSV文件是一种特殊的文本文件,文件中的数据以逗号作为分隔符,很适合进行数据的解析.先用excle建立如下表格和数据,另存为csv格式文件,放到代码目录下. 包含在Python标准库中自带CSV 模块,我们只需要impor

  • Python快速从视频中提取视频帧的方法详解

    目录 1.抽取视频帧 2.多线程方法 3.整体代码 补充 Python快速提取视频帧(多线程) 今天介绍一种从视频中抽取视频帧的方法,由于单线程抽取视频帧速度较慢,因此这里我们增加了多线程的方法. 1.抽取视频帧 抽取视频帧主要使用了 Opencv 模块. 其中: camera = cv2.Videocapture( ) ,函数主要是通过调用笔记本内置摄像头读取视频帧: res, image = camera.read( ) 函数主要是按帧读取视频,返回值 “res” 是布尔型,成功读取返回 T

随机推荐