標籤：練習 sample 模組化 apple 情況 pen 還需要 origin 代碼
為什要使用WebPack現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著複雜的JavaScript代碼和一大堆依賴包。為了簡化開發的複雜度，前端社區湧現出了很多好的實踐方法
WebPack可以看做是模組打包機：它做的事情是，分析你的項目結構，找到JavaScript模組以及其它的一些瀏覽器不能直接啟動並執行拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。
WebPack和Grunt以及Gulp相比有什麼特性
其實Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠最佳化前端的開發流程的工具，而WebPack是一種模組化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個設定檔中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之後可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主檔案（如：index.js），Webpack將從這個檔案開始找到你的項目的所有依賴檔案，使用loaders處理它們，最後打包為一個瀏覽器可識別的JavaScript檔案。
安裝Webpack可以使用npm安裝，建立一個空的練習檔案夾（此處命名為webpack sample progect），在終端中轉到該檔案夾後執行下述指令就可以完成安裝。
正式使用Webpack前的準備npm init命令可以自動建立這個package.json檔案npm init輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，作者等資訊，不過不用擔心，如果你不準備在npm中發布你的模組，這些問題的答案都不重要，斷行符號預設即可。
package.json檔案已經就緒，我們在本項目中安裝Webpack作為依賴包
// 安裝Webpacknpm install --save-dev webpack回到之前的空檔案夾，並在裡面建立兩個檔案夾,app檔案夾和public檔案夾，app檔案夾用來存放未經處理資料和我們將寫的JavaScript模組，public檔案夾用來存放準備給瀏覽器讀取的資料（包括使用webpack產生的打包後的js檔案以及一個index.html檔案）。在這裡還需要建立三個檔案，index.html 檔案放在public檔案夾中，兩個js檔案（Greeter.js和main.js）放在app檔案夾中，此時項目結構如所示
index.html檔案只有最基礎的html代碼，它唯一的目的就是載入打包後的js檔案（bundle.js）
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id=‘root‘> </div> <script src="bundle.js"></script> </body></html>Greeter.js只包括一個用來返回包含問候資訊的html元素的函數。
// Greeter.jsmodule.exports = function() { var greet = document.createElement(‘div‘); greet.textContent = "Hi there and greetings!"; return greet;};main.js用來把Greeter模組返回的節點插入頁面。
//main.js var greeter = require(‘./Greeter.js‘);document.getElementById(‘root‘).appendChild(greeter());webpack可以在終端中使用，其最基礎的命令是
webpack {entry file/入口檔案} {destination for bundled file/存放bundle.js的地方}只需要指定一個入口檔案，webpack將自動識別項目所依賴的其它檔案，不過需要注意的是如果你的webpack沒有進行全域安裝，那麼當你在終端中使用此命令時，需要額外指定其在node_modules中的地址，繼續上面的例子，在終端中屬於如下命令
//webpack非全域安裝的情況node_modules/.bin/webpack app/main.js public/bundle.js
webpack入門與筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
