Webpack新手疑问：如何一次性安装多个loader并加速新项目搭建？

嘿，我太懂这种每次启动新Webpack项目都要重复安装一堆loader的繁琐感了！下面给你分享几个实用的解决办法，帮你把这个流程提速N倍：

其实完全不用逐个安装，你可以在一条命令里一次性列出所有需要的loader和依赖，用空格分隔就行：

# npm 版本
npm install --save-dev babel-loader @babel/core @babel/preset-env css-loader style-loader file-loader url-loader html-webpack-plugin

# yarn 版本
yarn add --dev babel-loader @babel/core @babel/preset-env css-loader style-loader file-loader url-loader html-webpack-plugin

如果已经有了基础的package.json，也可以直接把常用的devDependencies复制进去，然后运行npm install或者yarn install，就能一次性装好所有依赖。

除了批量安装，还有几个更高效的方式能从根本上简化流程：

• 维护自己的Webpack模板仓库：把常用的loader配置、插件、项目基础结构（比如src目录、html模板）都整理好，存在一个Git仓库里。每次开新项目直接clone这个仓库，改改项目名和少量配置就行，连依赖都不用重新找——因为package.json已经包含了所有常用依赖，直接install就搞定。我自己就存了一个这样的模板，每次搭新项目5分钟就能进入开发状态。
• 利用Webpack CLI的初始化工具：Webpack官方提供的webpack-cli init命令可以引导你快速生成基础配置，还能选择需要的loader（比如CSS、Babel等），自动帮你安装对应的依赖，省去手动敲命令的麻烦。
• 启用包管理器缓存：不管是npm、yarn还是pnpm，都自带缓存功能，第一次装完依赖后，后续再安装相同版本的包会直接从缓存里取，速度快很多。如果用pnpm的话，缓存效率更高，因为它会硬链接包文件，不用重复下载冗余内容。
• 使用预设配置包：可以把常用的Webpack配置封装成一个npm包（或者直接用社区现成的工具比如webpack-merge配合基础配置），新项目里直接引入这个预设配置，只需要改少量自定义的部分就行，不用每次从零写配置。

内容的提问来源于stack exchange，提问作者TheCat