如何快速生成一個webpack新專案
快速生成一個webpack新專案
一.準備工作
windowns10系統
安裝node
安裝vscode軟體
二.配置檔案
1.開啟vscode,建立專案根目錄myproduct
在myproduct下面建立兩個平行資料夾src和dist與一個webpack.config.js檔案
目錄結構為: product-01 |-- dist //壓縮後的檔案儲存資料夾 |-- src //原始碼資料夾 |--webpack.config.js //webpack配置檔案 webpack.config.js檔案示例原始碼如下: module.exports = { mode : 'development' //development(開發時的配置) production(開發結束後的配置) }
2.在src檔案中建立兩個檔案index.html和index.js
index.html中的原始碼示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>這是入口檔案</h1> </body> </html> console.log('你在瀏覽器中按F12就可以看見我')
3.安裝依賴包
- 在根目錄下開啟終端(或在電腦專案根目錄處開啟cmd)
- 執行npm init -y快速初始化專案
- 在生成的package.json中將description填一填,
在生成的package.json新增"private": true命令(這個命令的意思是專案宣告為私有,不加這一條有可能會報錯)
package.json檔案原始碼示例:
{
"name": "product-01",
"version": "1.0.0",
"description": "這是一個描述檔案,是用來描述專案的,怎麼寫都行,根據公司業務來",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2"
}
}在終端執行npm install webpack webpack-cli -D,安裝這兩個包,安裝後可能會報錯,這個錯完全不用理,原因可參考https://blog.csdn.net/weixin_39690767/article/details/80025538
報錯的程式碼如下
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})然後在終端輸入命令webpack可以在dist資料夾中看到一個多餘的main.js,這個檔案就是被壓縮過的入口檔案
最終的目錄結構為
product-01
|-- dist
|---- main.js
|-- src
|---- index.html
|---- index.js
|-- package-lock.json
|-- package.json
|--webpack.config.js