如何导出当前webpack配置为webpack.conf.js文件？新建会覆盖原有配置吗？

一、导出当前生效的webpack配置 #

根据你使用的项目脚手架不同，对应操作方式如下：

• 原生webpack-cli搭建的项目
  webpack5+版本可以直接在package.json的webpack启动/构建命令后追加--print-config参数，示例如下：

  // 原命令
  "build": "webpack build"
  // 修改后
  "build": "webpack build --print-config > webpack.conf.js"
  

  运行一次对应命令后，当前生效的完整配置就会输出到项目根目录的webpack.conf.js文件中。如果需要导出开发环境配置，把build替换为开发对应的serve/dev命令即可。
  webpack4及更低版本可以在当前生效的配置文件末尾添加打印逻辑console.log(JSON.stringify(config, null, 2))，运行一次启动/构建命令后，把终端输出的配置内容复制到新建的webpack.conf.js中即可。
• Vue CLI创建的项目
  直接在项目根目录执行命令：

  # 导出开发环境配置
  vue inspect --mode development > webpack.conf.js
  # 导出生产环境配置
  vue inspect --mode production > webpack.conf.js
  

• Create React App创建的项目
  可以执行npm run eject操作（不可逆，执行后所有内置配置会暴露到项目根目录的config文件夹中），也可以在启动配置的入口处添加console.log(JSON.stringify(config, null, 2))手动打印完整配置后复制保存。

二、新建webpack.conf.js是否会覆盖原有配置 #

这个取决于你项目的webpack启动参数：

• 如果你当前的启动/构建命令中，已经通过--config参数明确指定了其他配置文件路径（比如指向脚手架内置的配置文件），那么你在根目录新建的webpack.conf.js不会被webpack读取，不会覆盖原有配置。
• 如果你没有指定过任何配置文件路径，webpack默认只会读取根目录下的webpack.config.js文件，你命名为webpack.conf.js的文件不会被默认识别，也不会触发覆盖。
• 如果你后续想要自己的配置文件生效，需要在启动命令中添加--config ./webpack.conf.js参数指定读取该文件，此时才会用你新建的配置替代原有配置。

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