webpack-chain 是什么？通过链式的方式修改webpack的配置。 一些列出本人常用的使用webpack-chain的方式修改webpack配置. 整个文件为： 有时候需要xx插件在aa插件之前调用。 有时候需要xx插件在aa插件之后调用。 webpack4.x默认使…

配置好之后，运行命令，就会在根目录生成一个stats.json文件，可以查看分析结果。这种方式只是初级分析，颗粒度较大。 配置好之后，运行打包命令的时候就可以看到每个loader 和插件执行耗时。 构建完成后，会在http://127.0.0.1:8888展示相关文件大小。按照…

大家好，我是小杜杜，在如今的前端项目中，都会有一个 package.json文件，那么大家会不会很好奇这个文件是干嘛的？为什么每个项目都会有这个文件呢？它的作用是什么？有哪些字段呢？解下来将逐步讲解一

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，…

首先，这是一个webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告，帮助提升代码质量和网站性能。 3、在命令行工具中输入npm run dev，按回车。 此时会打开浏览器，你将看到项目的分析图，大概长这样。 缺点： 每次…

还原设计图时，让px自动转rem。

通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。 DefinePlugin中的每个键，是一个标识符或者通过.作为多个标识符。 如果value是…

1. 核心概念 entry：入口。webpack是基于模块的，使用webpack首先需要指定模块解析入口(entry)，webpack从入口开始根据模块间依赖关系递归解析和处理所有资源文件。 output：输出。源代码经过webpack处理之后的最终产物。 loader：模块转…

在上一篇文章Webpack配置全解析介绍了Webpack中loader和plugins的一些基本用法，当loader和plugins使用较多后项目也会越来越耗时，因此这次我们继续学习如何优化webpack的配置来让我们的项目运行的更快耗时更短。 本文将从缩小文件搜索范围、减少打…