webpack2 还没研究好,就发现升级到4了,你咋这么快~

最近要做项目脚手架,项目构建准备重新做,因为之前写的太烂了...然后发现webpack大版本已经升到4了(又去看了一眼,4.5了),这么快的节奏,不适应啊...既然是新的,就用新的来吧,先跳过version3

webpack4 相对于之前的版本,有不少变化,其中包括一些不向下兼容的变化。具体哪些变化这里就不啰嗦了(4.0 changelog译文),今天主要记录一下 废除 commonChunksPlugin 之后,怎么使用 splitChunksPlugin && runtimeChunkPlugin

只记录到自己了解到的部分,不定期更新吧

splitChunksPlugin

splitChunksPlugin 默认配置项

{
"chunks": "all",
"minSize": 0,
"misChunks": 1,
"maxAsyncRequests": 1,
"maxInitialRequests": 1,
"name": undefined,
"automaticNameDelimiter": "~",
"filename": undefined,
"cacheGroups": {}
}

稍微来解释下各项配置:

  • chunks: all, async, initial 三选一, 插件作用的chunks范围
  • minSize: 最小尺寸
  • misChunks:最小chunks
  • maxAsyncRequests: 最大异步请求chunks
  • maxInitialRequests: 最大初始化chunks
  • name: split 的 chunks name
  • automaticNameDelimiter: 如果不指定name,自动生成name的分隔符(‘runtime~[name]’)
  • filename: ''
  • cacheGroups: 字面意思缓存组,主要配置在这里

cacheGroups配置项:

[key]: {
"priority": "缓存优先级权重",
"name": "split 出来的 chunk 的名字",
"chunks": "应该用范围",
"enforce": "未知",
"minSize": "最小尺寸",
"minChunks": "最小chunks",
"maxAsyncRequests": "",
"maxInitialRequests": "",
"filename": "最后output的文件名",
"reuseExistingChunk": "未知"
}

runtimeChunkPlugin

"runtimeChunk": {
"name": "manifest"
}

直接上例子了:

用不着的属性就不配置了,需要关联到 output 和 ExtractTextPlugin 配置

webpackConf: {
...,
output: {
path: path.join(process.cwd(), 'dist'),
publicPath,
filename: '[name].js',
chunkFilename: '[name].js'
},
optimization: {
splitChunks: {
chunks: 'initial', // 只对入口文件处理
cacheGroups: {
vendor: { // split `node_modules`目录下被打包的代码到 `page/vendor.js && .css` 没找到可打包文件的话,则没有。css需要依赖 `ExtractTextPlugin`
test: /node_modules\//,
name: 'page/vendor',
priority: 10,
enforce: true
},
commons: { // split `common`和`components`目录下被打包的代码到`page/commons.js && .css`
test: /common\/|components\//,
name: 'page/commons',
priority: 10,
enforce: true
}
}
},
runtimeChunk: {
name: 'page/manifest'
}
},
plugins: [
new ExtractTextPlugin({
filename: '[name].css',
ignoreOrder: true
}),
...
]
...
}

以上配置产出大致结构:

如果没有css文件,说明对应目录下没有相关css资源引用,或者未使用ExtractTextPlugin

dist
└── page
├── [commons.css]
├── commons.js
├── [manifest.css]
├── manifest.js
├── [vendor.css]
├── vendor.js
└── demo // entry 中 配置
├── index.css
└── index.js

写在最后

上边的例子是用的 optimization 配置项形式,你也可以用 plugin 形式,配置参数应该一样的。

之前搜索相关的配置,介绍的文章较少,有一些简单的demo,但总觉得不受用。

参考了不少文章,然后又大概读了 webpacksplitChunksPlugin 的源码,去了解了下都有哪些参数,看源码挺好

********************************** done **********************************

webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记的更多相关文章

  1. webpack4.41.0配置三(插件minCssExtract/ DefinePlugin/Html)

    (注:如无特殊说明这里的配置文件都指的是webpack.config.js) minCssExtract 我们通常期望js和js文件一起,css和css文件一起.该插件将CSS提取到单独的文件中.它为 ...

  2. webpack4.41.0配置二(加载器_url-loader/babel-loader/sass-loader)

    loader是webpack用来预处理源文件的,比如typesrcipt形式的文件最终都得转成浏览器可以执行的js文件 (注:以下的配置代码不一定与下方一摸一样,具体与官网上https://webpa ...

  3. webpack4.41.0配置一(基础配置webpack文件,入口出口,实现打包)

    1.查看node.js版本.npm版本和webpack版本(使用webpack4时,请确保node.js的版本>=8.9.4) 2.我先重新卸载了webpack和webpack-cli(全局) ...

  4. webpack4.x笔记-配置基本的前端开发环境(一)

    webpack的基本使用 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包.借用 webpack 官网的图片: 虽然webpack4.x的版本可以零配 ...

  5. 记一次webpack4.x项目配置

    在自构建自己的个人页面的时候使用到webpack4,遇到了一些问题,查看了大佬们的文章以及官方文档,在这里总结一下. webpack比较基础的东西就不赘述了,代码里面的注释也会辅助说明,先看一下目录结 ...

  6. webpack4.x打包配置

    很长时间没有进行webpack打包配置了,想起来都快有些忘记了,这个东西不是经常用到,只有在新建个项目的时候用到,不用官方模板,自己去动手配置的时候,有时候觉得还是有点难度.今天就想着自己动手进行配置 ...

  7. 【webpack系列】webpack4.x入门配置基础(一)

    一.前言 webpack在不断的迭代优化,目前已经到了4.29.6.在webpack4这个版本中,做了很多优化,引入了很多特性,将获得更多模块类型,.mjs支持,更好的默认值,更为简洁的模式设置,更加 ...

  8. webpack4.41.0配置四(热替换)

    每次修改都要去编译,这个操作比较繁琐.所以我们希望编译过程是自动化的,而且页面的更新也是自动化的.所以需要使用这个热替换 1.首先安装webpack-dev-server:npm install  w ...

  9. webpack4.x基本配置

    在学习vue的时候,需要进行打包操作,视频看的是webpack3的踩了好多坑,所以在记录一下,方便后续复习.有错误请指出. 新建项目文件 在项目文件下 执行npm init -y,进行初始化,生成pa ...

随机推荐

  1. HTML5进阶(二)HBuilder实现软件自动升级

    HBuilder实现软件自动升级 前言 移动APP开发好后需要实现软件自动升级功能,经过一番搜索,发现HBuilder具有"App资源在线升级更新"的功能,遂研究之. 经过一番测试 ...

  2. C#之概述

    当前流行的开发语言概述 C#是微软公司为Visual Studio开发平台推出的一种简洁.类型安全的面向对象的编程语言,开发人员可以通过她编写在.NET Framework上运行的各种安全可靠的应用程 ...

  3. Windows环境下搭建React Native

    随着移动开发越来越火热,前端开发也是有之前11年一直火热到现在,不过我发现从去年年底开发,Android和ios基本已经饱和了,特别是随着广大开源社区的中很多人贡献代码,开发已经不是什么问题了,所以现 ...

  4. UML之状态图

    状态图,英文名曰-Statechart Diagram,她是系统的动态方面建模的五种图之一,一个状态图显示了一个状态机,在为对象的生命期建模中,她发挥着重要的作用,展示了单个对象内从状态到状态的控制流 ...

  5. ngnix服务器搭建

    1.  到nginx官网上下载相应的安装包,http://nginx.org/en/download.html:下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在了d盘根目录下,如下图 ...

  6. iOS和Android开发异同点(一)

    说到移动开发,目前主流平台有谷歌的android os 系统,苹果iOS系统,和微软主打的windows Phone OS 系统,至于目前为啥移动开发中,安卓和iOS比较受欢迎,者要看三家产品的历史由 ...

  7. obj-c编程08:分类和协议

    篇文章里我们来聊聊如何扩展一个类的方法和实例变量,我们首先来看一下命名分类如何扩展一个类.在下面的代码中,首先定义一个类Player用来定义普通球员,如果第三方开发者发现普通球员缺少了一些方法,则可以 ...

  8. ruby:借助第三方类名如何查找第三方gem名称(zlib为例)

    rubygem中含有成千上万的第三方gem,网上书上扩展教程中都有指导如何使用第三方gem的例子.但是如果不幸这些例子都没有提及gem名称的话,如何只凭第三方类名或require名查找gem名称呢?换 ...

  9. 译文:ovs+dpdk中的“vHost User NUMA感知”特性

    本文描述了"vHost User NUMA感知"的概念,该特性的测试表现,以及该特性为ovs+dpdk带来的性能提升.本文的目标受众是那些希望了解ovs+dpdk底层细节的人,如果 ...

  10. Python 3.7 将引入 dataclass 装饰器

    简评:Python 3.7 将于今年夏天发布,Python 3.7 中将会有许多新东西,最激动人心的新功能之一是 dataclass 装饰器. 什么是 Data Class 大多数 Python 开发 ...