YaoDeBiAn的博客

起初，基于webpack构建的图形关系体系，chunks（包括其内部引进的modules）通过父子关系进行链接。过去我们通过CommonsChunkPlugin来避免重复的依赖，但是却达不到更进一步的优化。webpack4.x中，CommonsChunkPlugin已经被optimization.splitChunks取代，以达到更好的优化体验。Defaults（默认）开箱即用SplitCh...

概要这个配置表示split前单个非按需导入的module的并行数的最低下限。注：只对import或require直接引入的module有效。分析简单来讲，假如minChunks设置为n，那么某个module想要被拆分出去，那么它的共享次数（或者说并行请求次数必须 >= n）:1. minChunks设置为n2. 假设有m个入口点，这m个入口点都直接引入了某个模块module（通过...

概要cacheGroups即缓存组，其中的每一项缓存组都可以继承/覆盖之前提到的splitChunks参数值（如name、maxSize、minSize、maxInitialRequests、maxAsyncRequests等），除此之外还额外提供了三个配置，分别为：test, priority 和 reuseExistingChunk。test: 表示要过滤 modules，默认为所有的 ...

概要minSize和maxSize分别表示chunk在被拆分之前的最小体积和最大体积。（maxSize可以小于minSize）准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webp...

概要这个配置用于控制webpack打包时被拆分出来的bundle的名称。我们来看下官方文档上是怎样描述的：boolean = true 、function (module, chunks, cacheGroupKey) => string、stringAlso available for each cacheGroup:splitChunks.cacheGroups.{cache...

概要同maxAsyncRequests配置类似，该配置表示入口点能被拆分的最大数量。准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webpack.config.js（webpack...

这个配置用来控制按需引入的包中的直接引入的包的打包。准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webpack.config.js（webpack配置文件）webpack配置...

webpack的这个属性被用来指定项目中哪些部分将会被优化。准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webpack.config.js（webpack配置文件）webpa...

词汇表以下，罗列了整个webpack生态系统中常用的术语。AAsset: 这个术语主要是用来描述我们通常在web应用或者其他应用中用到的图片、字体文件、音视频，以及其他类型的一些文件。这些资源通常为一个个单独的文件，但在webpack中，我们借助style-loader或者css-loader也能进行适当的管理。BBundle: bundle通常是由多个不同的模块产生，它是已经加载...

1. 配置：上面是官方的原话~~~下面我们将会分别创建开发环境与生产环境的webpack配置文件，并将两个配置文件中公共用到的部分抽离出来，存放到一个公用配置文件中，最后通过webpack-merge这个工具我们将公共配置合并到开发与生产配置中。 首先下载webpack-merge:npm install --save-dev webpack-merge 文件目录中...

首先，在此声明一下，这篇文章之前写的时候也是有点模模糊糊，应该有很多错的地方（后半部分），或者逻辑比较乱的地方，各位小伙伴如果读这篇文章的话，感觉不清晰的地方就不要去深究了，以免浪费时间，同时把你们带偏，之后会抽空把文章纠正更新一下，在此对那些可能被我带偏的伙伴说声抱歉，同时也希望看我文章的哥们、小姐姐们能够指出我的一些问题，或者提供一些补充和一些小demo。foreword（前言）这里主要声...

每次要编译代码时，手动运行npm run build特别麻烦。webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：1.webpack's Watch Mode(观察模式)2.webpack-dev-server(提供一个服务器)3.webpack-dev-middleware(是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器...

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告，JavaScript 提供了...

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。 想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用n...

webpack中，有一种操作就是在“.js”文件中引入非javascript资源，所以在将其打包的过程中，我们需要某些loader解析器对相关的资源进行解析。 首先我们先来看看引入css资源：安装style-loader和css-loader两个loader:npm install --save-dev style-loader css-loader webpack.confi...

1.安装babel-preset-env包：npm install –save-dev babel-preset-env2.在根目录下创建.babelrc文件：{ "presets": [ "env" ], "plugins": []}3.为了检验我们的配置是否成功，我们再安装babel-cli包：npm install --save-dev babel-cli，然后我们...

准备工作1.初始化项目目录：npm init -y2.建立以下的目录结构：--dist--src----index.js--package.json（初始化后生成）3.完成基本的webpack配置：首先，安装基本的webpack包：npm install --save-dev webpack webpack-cli注：webpack4对webpack内核与c...