使用 CLI 方式配置文件（基礎(chǔ)）
一墩剖、基本安裝
mkdir webpack1.0 && cd webpack1.0
npm init -y （初始化問題-yes）
npm install webpack webpack-cli --save-dev
會生成package.json文件：
需要創(chuàng)建以下目錄結(jié)構(gòu)、文件和內(nèi)容：
webpack1.0
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
-
調(diào)整 package.json 文件诉儒，以便確保我們安裝包是私有的(private)，并且移除 main 入口。這可以防止意外發(fā)布你的代碼淮椰。
- src/index.js
function component() {
var element = document.createElement('div');
// Lodash（目前通過一個 script 腳本引入）對于執(zhí)行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
- index.html
<!doctype html>
<html>
<head>
<title>webpack 1.0</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
在此示例中，<script> 標(biāo)簽之間存在隱式依賴關(guān)系纳寂。index.js 文件執(zhí)行之前主穗，還依賴于頁面中引入的 lodash。之所以說是隱式的是因為 index.js 并未顯式聲明需要引入 lodash毙芜，只是假定推測已經(jīng)存在一個全局變量 _ 忽媒。
使用這種方式去管理 JavaScript 項目會有一些問題：
- 無法立即體現(xiàn)，腳本的執(zhí)行依賴于外部擴(kuò)展庫(external library)腋粥。
- 如果依賴不存在晦雨，或者引入順序錯誤，應(yīng)用程序?qū)o法正常運行隘冲。
- 如果依賴被引入但是并沒有使用闹瞧，瀏覽器將被迫下載無用代碼。
讓我們使用 webpack 來管理這些腳本展辞。
二奥邮、創(chuàng)建一個 bundle 文件
- 首先，我們稍微調(diào)整下目錄結(jié)構(gòu)纵竖，將“源”代碼(/src)從我們的“分發(fā)”代碼(/dist)中分離出來漠烧⌒臃撸“源”代碼是用于書寫和編輯的代碼∫雅В“分發(fā)”代碼是構(gòu)建過程產(chǎn)生的代碼最小化和優(yōu)化后的“輸出”目錄珊楼，最終將在瀏覽器中加載：
webpack1.0
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
- 要在 index.js 中打包 lodash 依賴，我們需要在本地安裝 library：
npm install --save lodash
注意：在安裝一個要打包到生產(chǎn)環(huán)境的安裝包時度液，你應(yīng)該使用 npm install --save厕宗，如果你在安裝一個用于開發(fā)環(huán)境的安裝包（例如，linter, 測試庫等）堕担，你應(yīng)該使用 npm install --save-dev已慢。請在 npm 文檔 中查找更多信息 。
- 可以在腳本中 import lodash：
src/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
- 現(xiàn)在霹购，由于通過打包來合成腳本佑惠，我們必須更新 index.html 文件。因為現(xiàn)在是通過 import 引入 lodash齐疙，所以將 lodash <script> 刪除膜楷，然后修改另一個 <script> 標(biāo)簽來加載 bundle，而不是原始的 /src 文件：
dist/index.html
<!doctype html>
<html>
<head>
<title>Webpack1.0</title>
<!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
</head>
<body>
<!-- <script src="./src/index.js"></script> -->
<script src="main.js"></script>
</body>
</html>
在這個設(shè)置中贞奋，index.js 顯式要求引入的 lodash 必須存在赌厅，然后將它綁定為 _（沒有全局作用域污染）。通過聲明模塊所需的依賴轿塔，webpack 能夠利用這些信息去構(gòu)建依賴圖特愿，然后使用圖生成一個優(yōu)化過的，會以正確順序執(zhí)行的 bundle勾缭。
可以這樣說揍障，執(zhí)行 npx webpack，會將我們的腳本作為入口起點俩由，然后 輸出 為 main.js亚兄。Node 8.2+ 版本提供的 npx 命令，可以運行在初始安裝的 webpack 包(package)的 webpack 二進(jìn)制文件（./node_modules/.bin/webpack）：
構(gòu)建成功
構(gòu)建成功采驻，就可以在瀏覽器中打開 index.html，看到以下文本：'Hello webpack'匈勋。
