1、前端構建工具Webpack
webpack 是一個模塊打包工具。什麼意思呢？它將一堆文件中的每個文件都作爲一個模塊，找出他們的依賴關係，將它們打包爲可部署的靜態資源。
1.1安裝
新建 learn-webpack 文件夾，進入該文件夾，運行
npm init -y
這個命令會在該文件下初始化一個 package.json 文件。package.json 主要是管理我們的依賴包，有三個地方需要注意：
{
// 這裏面可以定義一些腳本後面會講到
"scripts": {
},
// 表示是生產環境依賴的包，使用：
// npm install -S ... 或者 npm install --save ...
// 安裝的包會放到這裏，倆種方式是等價的
"dependencies": {
},
// 表示是隻在開發環境需要的包，使用：
// npm install -D ... 或者 npm install --save-dev ...
// 安裝的包會放到這裏，倆種方式是等價的
"devDependencies": {
}
}
接着運行
npm install [email protected] --save-dev
完成後，我們可以看到，package.json 中已經有了相應的配置。因爲沒有在全局安裝，所以，只能這樣運行：
node_modules/.bin/webpack
舉個栗子
當前路徑創建src目錄， 在 src下新建 main.js，只要在裏面寫入下面這句：
alert(‘Hello Webpack!’);
現在在 learn-webpack 目錄下運行：
node_modules/.bin/webpack src/main.js dist/bundle.js
這條命令就是將我們寫的 js 代碼打包到 dist/bundle.js 裏面。現在在 learn-webpack 下新建 index.html，寫入下面內容：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>hello world</h1>
<script src="./dist/bundle.js"></script>
</body>
</html>
然後打開這個頁面，就能看到它執行了我們在裏面寫的代碼:
腳本
如果每次運行上面的打包命令當然是很麻煩的，webpack 提供配置文件簡化這個過程。我們看到 package.json 中有一個 scripts 區域：
定義在這個裏面個腳本可以用
npm run + name
的方式執行，現在在 scripts 添加下面的內容：
"dev": "node_modules/.bin/webpack src/main.js dist/bundle.js"
現在就可以直接運行
npm run dev
來打包