前端构建工具webpack有啥缺陷

Posted 2023-05-01

1.文档缺失，尤其中文文档

长期以来webpack官方文档和example匮乏，提供的一些例子都是很简单那种，经常发现完全按照例子来配置但就是跑不起来，中文文档就更不用说了，少的可怜。这个问题也直接导致下面的第2点。
2.配置难&难调试

稍微复杂一点的项目，如果使用webpack编译，不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完，在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。总之正如下面有人回答那样，配置文件一旦跑起来，是根本不敢去改的，生怕又出错。
webpack的错误提示也非常难看懂，基本不可能从错误很直观的找到原因，长期以来碰到问题只能靠猜，你没看错，就是靠猜！！
3.编译慢
经验不足的同学很容易碰到这个问题，当然可以通过一些手段做优化，比如配置module的resolve、root等，使用happypack加速、dll提前编译等等。但是笔者曾经尝试过happypack，对编译速度有提升但效果不明显，dll的话我有按照官方文档的做法去做，但是最终编译出来又报了一些莫名其妙的错（也有可能是代码写的有问题），总之心累，后来直接改成externals方式，全局script引入第三方库。
4.对server-render不友好
webpack本质上还是静态打包，意思就是打包完成之后其实文件的加载顺序已经固定，只是被加载的时间不定而已。所以使用webpack原则上不存在按需加载之类的说法，code split其实是人工分隔，但是真实的按需加载场景岂是人工能枚举完的 （下划线这句话不太好解释，也不想过多解释，熟悉前端工程的人应该都明白啥意思）。
在这里我要说的对server-render不友好其实是指html的处理，webpack其实是通过在js里用require标记资源然后加载任意资源（css、图片、fonts等等），但其实html文件才是页面真实的入口，最终编译出的js还是需要引入到html里，为了防止css懒加载导致页面抖动，编译完的css还需要从js里边提取出来放到html外链。

目前一般都是通过html-webpack-plugin来做这个事情，先搜集某个html所引用的静态资源最终自动插入到html。这种方式对于前端渲染的应用没有问题，但是对于server-render的那就不行了，因为server-render下html是作为模板由后端语言吐出，而开发模式下（例如webpack-dev-server）webpack是不会输出任何文件的（开发环境webpack是将文件放到内存然后在路由层自动serve了），所以这会导致开发环境模板无法引用静态资源。当然，有一种解决方案就是静态资源不改变文件名称，预先写好路径，开发环境和生产环境同名（即覆盖式发布）。 参考技术A

配置多入口时，没有glob的方式，需要额外处理。

目录结构复杂时，file-loder里面的path功能太弱，很多时候无法自定义构建后的目录结构，只能放在一个目录下。

源码比较复杂，遇到问题看源码，要花很长时间。

如果没有 babel， webpack 对 ES2015+ 的语法是不接受的，会提示用指定 loader。这意味着，在支持部分 ES2015 语法的 firefox 与 chrome 浏览器中能直接跑的代码，无法用 webpack 编译。

前端工程化之构建工具webpack 的基本使用

1. 什么是 webpack

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。

2. 创建列表隔行变色项目

① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json

② 新建 src 源代码目录

③ 新建 src -> index.html 首页和 src -> index.js 脚本文件

④ 初始化首页基本的结构

⑤ 运行 npm install jquery –S 命令，安装 jQuery

⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

3. 在项目中安装 webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

4. 在项目中配置 webpack

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

 ② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

 ③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

4.1 mode 的可选值

mode 节点的可选值有两个，分别是：

① development

⚫ 开发环境

⚫ 不会对打包生成的文件进行代码压缩和性能优化

⚫ 打包速度快，适合在开发阶段使用

② production

⚫ 生产环境

⚫ 会对打包生成的文件进行代码压缩和性能优化

⚫ 打包速度很慢，仅适合在项目发布阶段使用

4.2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件， 从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

4.3 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

① 默认的打包入口文件为 src -> index.js

② 默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

4.4 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

示例代码如下：

 

---

 黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~