webpack --config修改配置文件 Shift-Command-5录屏mac
source ~/.bash_profile是额外的补充操作：
source命令用于重新加载 Shell 配置文件（这里是.bash_profile）。- 执行它可以让 NVM 的配置 “立即生效”，无需重启终端。
为什么要在--save dev安装webpack而不是直接安装
在使用 npm 或 yarn 安装依赖时，--save-dev（简写 -D）和 “直接安装”（默认或 --save，简写 -S）的核心区别在于 依赖的 “用途分类” —— 即该依赖是用于 “开发阶段” 还是 “生产运行阶段”。
webpack 作为构建工具，本质是 “开发阶段的辅助工具”，而非 “生产环境运行时必需的依赖”，因此需要用 --save-dev 安装。具体原因如下：
1. 先明确两个核心概念
dependencies（生产依赖）：项目运行时必须依赖的包（比如 React、Vue、lodash 等），用户最终使用你的项目（如运行网页、启动服务）时，这些包是必需的。安装时用--save（或默认不写，npm 5+ 后默认会加到 dependencies），会被记录到package.json的dependencies字段中。devDependencies（开发依赖）：仅开发阶段需要的工具（比如构建工具、编译器、测试工具等），用于辅助开发（如代码打包、语法转换、 lint 检查），但项目最终运行时不需要这些工具。安装时用--save-dev，会被记录到package.json的devDependencies字段中。
2. 为什么 webpack 属于 “开发依赖”？
webpack 的核心功能是 “打包代码” ：
- 开发时，你用 webpack 把源代码（如 ES6+、JSX、SCSS 等）转换、压缩、打包成浏览器可直接运行的代码（如 ES5 语法的 JS、普通 CSS）。
- 生产环境中，用户实际运行的是 webpack 打包后的结果（如
dist目录下的文件），而不是 webpack 本身。
简单说：webpack 是 “加工工具”，最终交付给用户的是 “加工后的产品”，工具本身不需要跟着产品一起交付。因此，webpack 只需要在开发阶段存在，属于 devDependencies。
3. 如果错误地用 --save 安装会怎样？
如果用 --save（或默认）把 webpack 安装到 dependencies 中，会导致：
- 项目体积变大：部署到生产环境时，
node_modules会包含 webpack 及其依赖（可能几百 MB），但这些在生产运行时完全用不到，属于冗余。 - 混淆依赖用途：其他开发者看
package.json时，会误以为 webpack 是运行时必需的，不利于项目维护。 - 潜在安全风险：多余的依赖可能引入不必要的漏洞（虽然概率低，但没必要增加风险）。
总结
--save-dev 的作用是明确标记依赖的用途：告诉工具和其他开发者，这个包仅用于开发阶段。
webpack 作为构建工具，符合 “开发阶段专用” 的特性，因此必须用 --save-dev 安装。类似的工具还有 babel（编译器）、eslint（代码检查）、jest（测试工具）等，都应该放在 devDependencies 中。
而像 React、Vue 这类 “运行时必须的库”，则需要用 --save 安装到 dependencies 中。
