- 原文鏈接
- 翻譯作者：飯團爸爸
開始
可能你已經知道 webpack 被用來編譯 JavaScript 的 modules(模塊），一旦安裝成功箫柳，你便能以 CLI 或者 API 的形式使用 webpack手形。如果你是一名 webpack 的新手，那么建議先讀 核心概念 以及 競品對比 去學習為什么你會用 webpack悯恍，而不是其它被社區(qū)淘汰的競品。
基礎安裝
首先我們創(chuàng)建一個文件夾坪稽，并且用 npm 初始化，然后在本地安裝 webpack:
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
現在我們將創(chuàng)建如下的文件目錄結果
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
function component() {
var element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
在這個例子里，存在隱式的依賴通過 <script> 標簽篙梢，我們的 index.js 文件依賴的 lodash 在運行之前就已經被包含在頁面之中。 這是因為 index.js 從未聲明需要 lodash 贬墩，它假設在它使用的時候陶舞，剛剛好有一個全局變量 _ 是存在的绪励。
這樣管理 JavaScript 項目存在著如下幾個問題
- 沒有對外部庫做顯示的依賴聲明
- 如果依賴缺失，或者引入了錯誤的順序停做，那么應用程序將無法正確執(zhí)行
- 如果一個依賴被包含，但是沒有被使用官份，但是瀏覽器還是會強制地下載沒有必要的代碼片段贯吓。
好的蜀变，現在讓我們使用 webpack 來管理這些問題库北。
創(chuàng)建一個捆綁
首先我們要對目錄做一些微調们陆，從分發(fā)代碼 /dist 中拆分源碼 /src . "source" 文件夾中保存我們編輯的代碼坪仇，"distribution" 文件中存放經過構建器處理過后最小化和優(yōu)化過的output，他們將最終被瀏覽器所加載喂很。
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
為了能在index.js中捆綁lodash少辣，我們需要現在本地安裝對應的庫羡蛾，方法如下
npm install --save lodash
然后將其在我們的 script (腳本)中引入
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());
現在痴怨，因為我們將捆綁我們的 script，我們需要更新我們的index.html文件捐迫。讓我們移除 lodash 的 <script>,現在我們import它弓乙，然后修改其它<script>去加載這個綁定，用于替代原始的/src文件暇韧。如下
dist/index.html
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="bundle.js"></script>
</body>
</html>
在這個步驟懈玻，index.js顯示的加載了lodash在當前環(huán)境，然后指定其為_ (這里沒有全局代碼污染)艺栈。通過描述一個模塊需要的依賴湿右，webpack 可以使用這些信息去構建一個依賴圖罚勾。然后使用這個依賴圖去生成一個優(yōu)化后的捆(bundle,后續(xù)使用 bundle 直接稱呼 webpack 打包生成的捆)，在這個 bundle 中腳本將被會以正確的順序執(zhí)行丈莺。
根據上述的說明缔俄，我們現在將我們的腳本作為入口接口器躏，將bunlde.js作為輸出來運行webpack。具體的執(zhí)行命令如下
./node_modules/.bin/webpack src/index.js dist/bundle.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
你的輸出可能會有上述會有一點不同瞎疼，但只要構建成功都是可以正常執(zhí)行的贼急。
打開index.html文件在你的瀏覽器中捏萍，如果一切正常的話，你會看見如下文本:'Hello webpack'走敌。
ES2015 模塊
盡管import和export表達式還不能被大多數瀏覽器所支持掉丽，webpack 依舊支持它們。其中的原理在于捶障，webpack 實際上轉換這些代碼以便老的瀏覽器依舊可以運行他們项炼。如果你閱讀dist/bundle.js文件，你可以看到 webpack 如何處理它們暂论，那是非常精巧的拌禾。
使用配置項
因為大部分項目都會需要一個更為復雜的步驟，所以 webpack 支持一個 配置文件闻蛀。比起使用在終端中使用大量的命令行，使用配置文件是一個更為高效的方式析恢，所以現在讓我創(chuàng)建一個去替代終端命令。首先我們修改項目結構
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
現在讓我們使用配置文件再一次運行配置文件
./node_modules/.bin/webpack --config webpack.config.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
If a webpack.config.js is present, the webpack
如果 webpack.config.js 是存在的泽篮，webpack命令行工具會使用它作為默認配置文件帽撑，如果我們使用--config選項鞍时，我們可以通過文件名稱任意指定一個配置文件。這對于一個配置項復雜到需要拆分的項目來說及塘，是十分有用的锐极。
配置文件比起命令行支持更加靈活的的功能。我們可以指定特定的加載規(guī)則肋层，插件，解析選項和其它增強功能栋猖。參考配置文件文檔去了解更多相關信息掂铐。
NPM 腳本
鑒于在命令行中運行 webpack 的命令比較長，我們可以使用一些簡單快捷方式爆班。我們現在可以在package.json文件中添加如下 npm 腳本辱姨。
{
...
"scripts": {
"build": "webpack"
},
...
}
現在我們只需要使用npm run build命令就可以替代冗長的 webpack 命令。添加這些在script中枢舶，我們可以通過名稱引用本地已經安裝的包凉泄，而不是寫出完整的路徑蚯根。這個方法允許我們直接使用webpack而不是使用node_modules/webpack/bin/webpack.js,并且它已經成為大多數基于 npm 的項目用來簡化 webpack 命令的標準。
現在讓我們來允許如下命令蒂誉，你將會看到如下結果
npm run build
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
結語
現在你已經有了一個基礎的構建項目右锨，現在你應該鉆研[核心概念]和[配置文件]以便能更好地理解 wepack 的設計碌秸。API章節(jié)專注于介紹 webpack 提供的接口〉欠颍或者如果你想更好地通過示例學習允趟，在后續(xù)的章節(jié)中，你面對的 demo 基本上都是基于如下結構的.
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
