webpack指南-webpack入門-開始使用webpack

webpack用來在你的app中建立JS子產品。為了從cli或api開始使用webpack，按照安裝手順即可。

webpack通過快速建構app依賴圖并以正确順序打包來簡化工作。webpack可以配置來做代碼定制優化，為産品劃分vendor/css/js，運作一個熱重載你的代碼的開發伺服器而不需要重新整理頁面之類的好特性。

繼續學習以了解為什麼你應該使用webpack

建立demo來試用webpack。

mkdir webpack-demo && cd webpack-demo npm init -y npm install --save-dev webpack

./node_modules/.bin/webpack --help # Shows a list of valid cli commands .\node_modules\.bin\webpack --help # For windows users webpack --help # If you installed webpack globally

建立子目錄/app并建立index.js

app/index.js

function component () {     var element = document.createElement('div');     /* lodash is required for the next line to work */     element.innerHTML = _.join(['Hello','webpack'], ' ');     return element; } document.body.appendChild(component());

為了運作這段代碼，一般需要以下的HTML

index.html

In this example, there are implicit dependencies between thetags.

在這個示例中，标簽中有隐式依賴。

index.js依賴在它運作之前引入的lodash。他是隐式依賴的原因是index.js從未聲明lodash的需求，他隻是假定有一個全局變量_存在。

但是如此維護JS項目有一些問題。

○如果依賴缺失，或者引入順序錯誤，app将不能起作用。

○如果依賴被引入但未被使用，那麼浏覽器需要去下載下傳很多不必要的代碼。

為了将lodash依賴和index.js打包，我們需要首先安裝lodash

npminstall--save lodash

然後導入

我們也需要更改index.html檔案來僅僅需要一個bundle.js檔案。

現在，index.js顯示依賴lodash并将之與_綁定（沒有全局作用域污染）

通過聲明子產品所需依賴，webpack可以以此資訊建立依賴圖。他将使用依賴圖生成會以正确順序執行的定制打封包件。當然，未被使用的依賴不會被打包。

運作webpack，以index.js為輸入，bundle.js為輸出，這個頁面所必須的代碼都将被打包好。

用浏覽器打開index.html檔案，觀察成功打包後的結果，你應該會看到頁面上出現Hello webpack的文字。

注意到app/index.js中使用的ES2015子產品import（也稱ES2015,harmony）了嗎？雖然浏覽器（暫時）不支援import/export，使用它們仍舊是好的，因為webpack會用ES5相容封裝代碼替換那些指令。檢視dist/bundle.js以驗證。

注意，webpack除了import/export外不會初級你的代碼。如果你在使用其他的ES2015特性，確定使用類似Bable或者Bublé這樣的轉換編譯器。

在更加複雜的配置情況下，我們可以使用配置檔案讓webpack為我們打包代碼。建立webpack.config.js檔案後，你可以用下面所示config設定來完成之前的CLI指令操作。

按照如下方式運作。

config檔案提供了所有的靈活性。使用配置檔案我們可以添加加載器規則，插件，解析選項以及很多其他增強到包中。

通過CLI方式運作webpack并不有趣，我們可以更快捷，更改package.js：

現在你可以通過npm build指令完成同樣功能了。npm找出scripts并臨時合并到環境中這樣就能包含bin指令了。你将會在大量項目中看到這個慣例。

既然你擁有一個基礎建立，你應該深入 基本概念 和 配置 章節來更好地了解webpack的設計。同時檢視guides學習如何處理共通問題。API部分包含低級别特性用法。

。