前言(废话)
在探索 Webpack 配置的同时，我们也可以借助科技类小说中的联合体概念来理解 Webpack 的新特性。比如，Webpack 5 中的 "Module Federation" 功能，让我们能够在不同的应用之间共享模块，就像联合体中的不同阵营组成一个庞大的力量一样。而 "Persistent Caching" 让我们能够更加高效地缓存模块，类似于联合体中不同阵营共同保护这个世界。通过将科技和想象结合起来，我们能够更好地理解和应用 Webpack 的新特性。(GPT写的!✍️)
开始咯!!
想必大家在使用Vue/React开发项目时,对Webpack的配置肯定有多多少少的接触吧
(本文主打让你了解webpack并能够对自己的项目运行/打包配置有显然的优化体验等)
##准备工具
- vs code
- node
- pnpm
- ...
新建一个文件夹!!! 打开vs code工具 目录结构(目前)
运行下面任意一个命令
pnpm init / npm init / yarn init (随便一个)
pnpm webpack-cli -D
对于初学者来说(webpack配置太多太杂,很难去学)
请看图:
修改一下: entry:./src/main.js
(其实基础这个几个配置模块入口,你就能清晰的知道需要在那配置)
下面我们把项目运行起来
npx webpack
随后把dist下打包的文件引入 html中
到目前为止, 我们简陋的实现‘打包功能’,接下来继续
output (输出文件入口)
module (加载器)
plugins (插件)
optimizationd, evServer, mode, devtool, resolve
在学习webpack 分成这个几个大块,基本是很清晰的知道在哪配置
文本是在学习webpack稍微总结一下
