Webpack入門之一：從一個簡單例子入門
一、Webpack安裝
先在要使用Webpack的資料夾下初始化npm
執行npm init命令， 接下來是需要輸入一系列專案資料，直接回車跳過就可以了。
安裝Webpack
首先需要在全域性安裝webpack。
執行cnpm install webpack -g命令。
在工作目錄執行npm install webpack –save-dev命令，安裝Webpack。
安裝loader
通過執行cnpm install css-loader style-loader –save-dev命令，安裝所需的loader。
基本專案結構
先從一個基本專案結構來分析webpack的打包原理。
a. 首先一個頁面通過引入hello.bundle.js檔案來實現完整的功能。
b. hello.bundle.js是在webpack以一個入口的js檔案，即hello.js來確定該頁面需要引入的js檔案（world.js）、css檔案（style.css），確定了各模組之間的相互關係之後，將其整合生成的一個檔案。
c. hello.bundle.js是一個實際被執行的檔案，按照hello.js、world.js、style.css之間的相互關係執行，簡單來說是機器執行的。
d. 而hello.js、world.js、style.css只是各個模組的程式碼，由開發人員定義和編寫，並不實際被執行，簡單來說是人看的。
打包並執行一個簡單專案
a. 我們先編寫index.html<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Webpack</title> <style></style> </head> <body> <div class="wrap"></div> <script type="text/javascript" src="hello.bundle.js"></script> </body> </html>b. 接下來是入口檔案hello.js
require('./world.js'); require('style-loader!css-loader!./style.css'); // webpack本身不能載入css檔案，需要使用css-loader用來使webpack可處理css檔案，style-loader用來將css的style轉換為<style>標籤中的樣式，插入到HTML檔案中。 function hello(str) { document.write(str); } hello(' Hello Everyone!');c. 被引入的world.js
function world() { return { text: 'Hello World!' }; } var text = world().text; document.write(text);d. 引入的頁面樣式style.css
html body { margin: 0; bottom: 0; background: #faa; }執行webpack
執行命令webpack hello.js hello.bundle.js –watch
這行命令的含義是，以hello.js為入口打包，輸出為hello.bundle.js，同時設定了–watch，讓webpack實時監控檔案的修改，在有修改時，自動進行打包。
檢視執行結果
我們看到了最終的執行結果，hello.bundle.js載入了style.css檔案，並將其編譯成css程式碼，插入到了html檔案中，而world.js被引入並執行，之後執行的是hello.js中的程式碼。
檢視打包後的hello.bundle.js檔案
hello.bundle.js檔案內包含了各個模組以及其相互之間的關係，用瀏覽器可執行的程式碼封裝並執行。
9.
