You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.7 KiB
62 lines
1.7 KiB
2 years ago
|
= 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]
|
||
|
|
----
|
||
|
|
|
||
|
|
----
|