創建項目:
打開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])
創建後會出現這個