wepack4+plugins+loaders项目复盘总结(上)

最新推荐文章于 2023-03-01 22:38:01 发布

用户名加载中......

最新推荐文章于 2023-03-01 22:38:01 发布

阅读量231

点赞数 1

分类专栏：前端工具文章标签： js webpack 项目依赖

本文链接：https://blog.csdn.net/qq_39989929/article/details/89297108

版权

本文复盘了webpack4的安装、配置、webpack-dev-server的使用以及html-webpack-plugin插件的配置。在webpack4中，尽管主打零配置，但在实际项目中仍需配置plugins和loaders。文章详细介绍了如何配置entryPoint、outputPoint、mode，以及webpack-dev-server的端口、hot模块替换等功能，并讨论了hot替换与热刷新的区别。

摘要由CSDN通过智能技术生成

第一次使用webpack时，被其繁杂的配置弄的焦头烂额，但是打过多次交道后，慢慢的也变的熟络起来，这一次复盘就来根据查询加检验的结果来总结一下；

一、webpack4安装

项目使用是的webpack4，版本4与之前版本的区别在于，可以不再依赖配置文件，但其仍然是高度可配置的；虽然主打零配置，但是项目中所使用的plugins/loaders仍然需要配置的，所以暂时还是脱离不了webpack.config.js的；

在4之前的版本中，webpack与webpack-cli是放在同一个包中的，我们直接通过npm安装webpack就好；但是在webpack4中，已经将webpack与webpack-cli分在两个包中，我们需要分别安装，另外，若只是本地安装webpack-cli，我们的webpack命令在项目中是无效的，所以需要将webpack-cli包进行全局安装，或本地安装后进入node_modules/webpack/bin文件中运行webpack命令；