2021年再谈 webpack 项目搭建，保姆级教程，手把手带你搭建 webpack5 + ts + vue3 的企业级项目开发环境

在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。 说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。…

比如有一个txt文件，我们想通过raw-loader来获取整个txt文件里面的字符串内容。除了使用统一webpack config配置的方式之外，我们还可以在引入的时候，用这样的语法来引入： 其实使用webpack.config文件统一配置loader后，最终也是会转成这种方式…

最近在学习 vue-cli 的源码，获益良多。为了让自己理解得更加深刻，我决定模仿它造一个轮子，争取尽可能多的实现原有的功能。 尽可能用最少的代码实现一个最简版本的脚手架。 在 1 的基础上添加一些辅助功能，例如选择包管理器、npm 源等等。 实现插件化，可以自由的进行扩展。在…

希望读过本篇文章，你在看Webpack配置的时候，能在脑中形成Chunk的生成过程。 Chunk不同于entry、 output、module这样的概念，它们对应着Webpack配置对象中的一个字段，Chunk没有单独的配置字段，但是这个词出现在CommonsChunkPlug…

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

原有的vue-cli,create-react-app在项目较大时编译时间过长，扩展性不好。重写了一套，优化了构建速度和体积。主要从以下优化了webpack 开启多线程压缩有多种方式，happy-pack/thread-loader/parallel-webpack等，ha…

提到前端打包工具，毫无疑问想先到的是webpack。但是前端发展地很快，时不时会有新东西出现，打包工具这边之前也出现parcel和rollup。各种工具的碰撞，相互汲取优点，促进技术的发展。 webpack4中支持了零配置的特性，同时对块打包也做了优化，CommonsChunk…

这里以vue项目为例，配置包括但不限于vue项目。其他项目按类似逻辑配置基本一样。 分析：通过把类似 echart、element-ui、lodash 等第三方依赖库单独提取出，从而减小打包的体积大小，关键属性 externals 配置后的依赖插件不会被打包进 chunk 。而…