1.介紹

Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。

2.安裝

我們需要安裝一個node.js ， Node.js 自帶了軟體包管理器 npm，建議使用最新版node.js.

通過npm安裝webpack:

$ npm install webpack -g

安裝成功後通過 webpack -h 檢視幫助

3.使用

我們建立一個專案來使用一下webpack吧！

新建一個demo1資料夾，

通過npm init 建立一個package.json檔案：（看不懂的可以一直回車，沒什麼關係）

我們把webpack安裝到當前的專案依賴中：

安裝後package.json：

新建一個index.html：

新建一個main.js（根據傳統使用helloword！！）：

document.write('<h1>Hello World</h1>');

新建一個webpack.config.js：

// webpack.config.js
module.exports = {
 entry: './main.js', 
 output: {
 filename: 'bundle.js'
 }
 };

這個檔案的意思是 把main.js檔案打包為bundle.js檔案。

其中bundle.js檔案是Webpack生成出來的，不是我們建立的。

cmd鍵入命令：

$ webpack

開啟index.html就能看到 hello world 了.

webpack也可以將依賴模組打包到一個檔案：

新建一個main1檔案

// main1.js
document.write('<h1>Hello World</h1>');

更改main.js檔案

//main.js
document.write('<h1>Hello World</h1>');
require("./main1.js")

重新打包 可以看到頁面

Webpack 會分析入口檔案，解析包含依賴關係的各個檔案。這些檔案（模組）都打包到 bundle.js 。Webpack 會給每個模組分配一個唯一的 id 並通過這個 id 索引和訪問模組。在頁面啟動時，會先執行 入口檔案 中的程式碼，其它模組會在執行 require 的時候再執行。

webpack還可以打包多個入口檔案：

在原來專案下新建資料夾，進入資料夾：

新建main1.js main2.js檔案：

// main1.js
document.write('<h1>Hello World</h1>');
 
// main2.js
document.write('<h2>Hello Webpack</h2>');

新建webpack.config.js檔案：

//webpack.config.js
module.exports = {
 entry: {
 bundle1: './main1.js',
 bundle2: './main2.js'
 },
 output: {
 filename: '[name].js'
 }
}

新建 index.js:

重新打包 可以看到頁面。