面试题：Webpack CLI 脚手架自定义扩展之基础配置

Question

请简述如何基于Webpack CLI脚手架创建一个自定义扩展，包含初始化自定义扩展项目的基本步骤以及在package.json中需要配置的关键字段。

Answer 1

初始化自定义扩展项目基本步骤

1. 全局安装Webpack CLI： 确保你已经全局安装了Webpack CLI，通过命令 npm install -g webpack -cli 完成安装。
2. 创建项目目录： 在你希望的位置创建一个新目录用于存放自定义扩展项目，例如 mkdir my - webpack - extension，然后进入该目录 cd my - webpack - extension。
3. 初始化npm项目： 在项目目录下运行 npm init -y，这会生成一个默认的 package.json 文件，该文件会记录项目的基本信息和依赖。
4. 安装必要依赖： 通常需要安装 webpack 和 webpack - cli 作为项目依赖，运行 npm install webpack webpack - cli --save - dev。

package.json中需要配置的关键字段

1. name： 项目的名称，它是唯一标识你的自定义扩展的名称，例如 "name": "my - webpack - extension"。
2. version： 项目版本号，遵循语义化版本规范，如 "version": "1.0.0"。
3. description： 对项目的简短描述，帮助他人了解扩展的功能，例如 "description": "A custom webpack extension for [describe what it does]"。
4. main： 指定项目的入口文件，一般对于Webpack扩展可能是一个JavaScript文件，如 "main": "src/index.js"。
5. scripts： 配置一些常用脚本，比如 "scripts": {"build": "webpack --config webpack.config.js"}，这样可以通过 npm run build 来执行Webpack构建。
6. devDependencies： 列出开发过程中需要的依赖，前面安装的 webpack 和 webpack - cli 会被记录在此处，例如 "devDependencies": {"webpack": "^[version]", "webpack - cli": "^[version]"}。