= Webpack
== 初始化前端工程
[source,bash]
----
# 创建新的工程目录 /Users/wangshaoping/wspsc/workspace/wangshaoping/platform/v10/platform-frontend/test
mkdir /Users/wangshaoping/wspsc/workspace/wangshaoping/platform/v10/platform-frontend/test
# cd 到新建的目录中
cd /Users/wangshaoping/wspsc/workspace/wangshaoping/platform/v10/platform-frontend/test

# 初始化前端工程
npm init

# 初始化成功后,会在工程目录中创建 package.json 文件
# 打开 package.json 文件, 添加 webpack 相关依赖
vi package.json

# 编辑内容,结果如下:
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "5.83.1",
    "webpack-cli": "5.1.1"
  }
}

# 保存
# 安装
npm install

# 初始化 webpack 工程
npx webpack init

# 提示:
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n)

# 输入 y, 回车, 等待安装 @webpack-cli/generators, 安装完毕后进入初始化向导:
# 选择语言: Typescript
# webpack-dev-server: y
# simplify the creation of HTML files for your bundle: y
# add PWA support: n
# CSS solutions do you want to use: SASS
# using CSS styles along with SASS in your project: y
# using PostCSS in your project: y
# extract CSS for every file: Yes
# install prettier to format generated configuration: y
# Pick a package manager: pnpm
# Overwrite package.json: y
----
[source,json]
----

----