標籤：
過去數年間，web開發已經從包含少量JavaScript代碼的應用發展到到擁有複雜JavaScript代碼和代碼之間相依樹狀結構的應用。Webpack能分析項目的結構，找到JavsScript模組和其他Assets，然後收集打包給瀏覽器使用。來看一個簡單的Webpack使用例子。
1、工具安裝和環境配置
首先要安裝npm，直接安裝Node.js就可以了。然後使用npm install -g webpack全域安裝，或者在對應的工程目錄下本地安裝。接下來我們建立一個工程目錄，比如sample1。然後建立兩個目錄app和public。app目錄下建立兩個檔案Greeter.js和main.js，public目錄下放置一個index.html檔案。然後執行npm init命令，建立package.json檔案。如果沒有全域安裝webpack，還要使用npm install webpack命令，目錄下會多出一個node_modules目錄。
2、代碼實現
Greeter.js和main.js代碼實現如下：
//main.jsvar greeter = require(‘./Greeter.js‘);document.getElementById(‘root‘).appendChild(greeter());//Greeter.jsmodule.exports = function() { var greet = document.createElement(‘div‘); greet.textContent = "Hi there and greetings!"; return greet;};
index.html實現如下：
<!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>
注意到我們使用了bundle.js這個檔案，我們將在第三步中使用webpack產生這個檔案。
3、使用Webpack打包
接下來我們使用webpack app/main.js public/bundle.js產生bundle.js檔案。我們只需要告訴webpack主檔案是main.js，webpack就會找到所有使用的依賴檔案，將所有檔案一起打包處理。
然後用瀏覽器開啟index.html檔案，就可以看到Hi there and greetings!語句了。
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
