0003-進行創建Webpack項目

創建項目:

打開node js 命令行

輸入創建項目的語句

mkdir app

就會在當前的用戶下面創建項目,文件地址如圖

在 app 目錄下添加 runoob1.js 文件,代碼如下:

document.write("It Works");

在 app 目錄下添加 index.html 文件,代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</head>
<body>
	
</body>
</html>

使用 webpack 命令來打包命令行:

mkdir webpackDemo // 創建項目
cd webpackDemo // 進入項目
mkdir app // 在項目中創建app文件
mkdir common // 在項目中創建common文件
cd app // 進入app文件夾
touch app.js // 創建app.js文件
touch main.js // 創建main.js文件
cd .. //返回到webpackDemo項目根目錄
cd common // 進入common文件
touch index.html // 創建index.html文件

然後我們可以進行創建Webpack

npm install webpack -g

上圖命令1 查看npm 版本

上圖命令2 創建webpack

C:\Users\wufengfeng>npm install webpack -g
npm WARN engine [email protected]: wanted: {"node":">=6.11.5"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6.9.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">= 6.9.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6.0.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN optional dep failed, continuing [email protected]
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">= 4.5.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">= 4.5.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
C:\Users\wufengfeng\AppData\Roaming\npm\webpack -> C:\Users\wufengfeng\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
[email protected] C:\Users\wufengfeng\AppData\Roaming\npm\node_modules\webpack
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── @webassemblyjs/[email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── @webassemblyjs/[email protected] (@webassemblyjs/[email protected], @webassemblyjs/[email protected], @webassemblyjs/[email protected], @webassemblyjs/[email protected], @webassemblyjs/[email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── @webassemblyjs/[email protected] (@webassemblyjs/[email protected], @webassemblyjs/[email protected], @webassemblyjs/[email protected], @webassemblyjs/[email protected], @webassemblyjs/[email protected], @webassemblyjs/[email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected]
├── @webassemblyjs/[email protected] (@webassemblyjs/[email protected], @webassemblyjs/[email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

創建後會出現這個

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章