2.WebPack初始化
一.Package.json
在項目中輸入：
npm init
之后會提示你一步一步輸入信息，我輸入的信息如下：
生成的Package.json文件如下
我們也可以在初始時省略這些步驟，讓腳本使用默認值
npm init –yes
Package.json中的鍵值對代表以下含義
{
"name": "webpack-demo", //包名
"version": "1.0.0", //版本號 主版本.次版本.修訂版本
"description": "", //項目描述
"main": "index.js", //模塊入口文件
"scripts": { //腳本 可以使用 npm run test 來省略重復輸入
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //關鍵詞
"author": "", //作者
"license": "ISC" //許可證
}
注：在Json文件中不能有注釋，這里只是為了方便說明。
二、測試
在項目目錄下創建以下結構
1.傳統方法
在index.js中輸入以下內容
msg();
在dependency.js中輸入以下內容
function msg() {
console.log("from dependency!");
}
直接在index.html中引入
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<script src="./src/dependency.js"></script>
<script src="./src/index.js"></script>
</body>
</html>
運行正常
這樣有如下的缺點：
-
網頁需要請求兩次JS文件
-
我們需要注意JS依賴，并要手動放置在正確的順序上，如果dependency.js于index.js先前引入，則會造成運行異常，項目依賴項過多時更是明顯。
2.使用WebPack打包
首先改造下index.js和dependency.js，可以使用Commonjs規范或者ES6語法特性來導入導出模塊
1.使用Commonjs規范
dependency.js
module.exports.func = function() {
console.log("from dependency!");
}
index.js
const o = require("./dependency")
o.func();
2.使用ES6語法特性
dependency.js
export default function () {
console.log("from dependency!");
}
index.js
import func from "./dependency"
func();
3.打包
在項目目錄下輸入webpack即可自動打包，打包完成后，在項目目錄下生成dist文件夾，可以發現里面生成了一個main.js文件，這便是打包好的文件了。我們修改index.html如下
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<!-- <script src="./src/dependency.js"></script>
<script src="./src/index.js"></script> -->
<script src="./dist/main.js"></script>
</body>
</html>
運行頁面，可以發現沒問題。
我們看下網絡請求
可以發現請求數少了一次，看似總時間沒有什么變化，那是因為當前請求的文件較少，體現不出WebPack打包生成然后引用一個文件的優勢。需要注意的是，WebPack不只可以打包JS文件，還可以打包圖片、CSS樣式表。
浙公網安備 33010602011771號