一.什么是 Webpack

敘永網站建設公司成都創(chuàng)新互聯(lián)公司,敘永網站設計制作，有大型網站制作公司豐富經驗。已為敘永數(shù)千家提供企業(yè)網站建設服務。企業(yè)網站搭建\成都外貿網站制作要多少錢，請找那個售后服務好的敘永做網站的公司定做！

Webpack 是一個模塊打包器。它將根據(jù)模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。

webpack模式圖

二.為什么使用webpack

市面上已經存在的模塊管理和打包工具并不適合大型的項目，尤其單頁面 Web 應用程序。最緊迫的原因是如何在一個大規(guī)模的代碼庫中，維護各種模塊資源的分割和存放，維護它們之間的依賴關系，并且無縫的將它們整合到一起生成適合瀏覽器端請求加載的靜態(tài)資源。而webpack有以下幾個優(yōu)點：

1.將依賴樹拆分成按需加載的塊：Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的快。在優(yōu)化了依賴樹后，每一個異步區(qū)塊都作為一個文件被打包。

2.初始化加載的耗時盡量少：Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

3.各種靜態(tài)資源都可以視作模塊：Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

4.將第三方庫整合成模塊的能力：Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態(tài)表達式 require("./templates/" + name + ".jade")。

5.自定義打包邏輯的能力：Webpack 還有一個功能豐富的插件系統(tǒng)。大多數(shù)內容功能都是基于這個插件系統(tǒng)運行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。

6.適合大項目，無論是單頁還是多頁的 Web 應用

三.安裝webpack

首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建議使用最新版 Node.js。

用 npm 安裝 Webpack：

$ npm install webpack -g

此時 Webpack 已經安裝到了全局環(huán)境下，本課程中我們已裝好webpack，可以通過命令行 webpack -h 試試。

通常我們會將 Webpack 安裝到項目的依賴中，這樣就可以使用項目本地版本的 Webpack。

1.進入項目目錄

2.確定已經有 package.json，沒有就通過 npm init 創(chuàng)建

3.輸入命令 $ npm install webpack --save-dev 安裝 webpack 依賴

Webpack 目前有兩個主版本，一個是在 master 主干的穩(wěn)定版，一個是在 webpack-2 分支的測試版，測試版擁有一些實驗性功能并且和穩(wěn)定版不兼容，在正式項目中應該使用穩(wěn)定版。

# 查看 webpack 版本信息
$ npm info webpack
# 安裝指定版本的 webpack
$ npm install webpack@1.12.x --save-dev

四.在項目中使用webpack

首先有一個靜態(tài)頁面 index.html，

現(xiàn)在創(chuàng)建一個 JS 入口文件 entry.js：

  // entry.js
 pico entry.js
 // 進入編輯器輸入
 document.write('It works.');
 // 保存并退出

然后編譯 entry.js 并打包到 bundle.js，運行命令：

$ webpack ./entry.js bundle.js

如果成功，打包過程會顯示日志：

 Hash: aeec068c58e1e78f0fb6
 Version: webpack 1.12.9
 Time: 70ms
 Asset   Size Chunks       Chunk Names
 bundle.js 1.48 kB    0 [emitted] main
 [0] ./entry.js 87 bytes {0} [built]

在點擊訪問測試將會打開一個新的窗口。它應該會顯示It works.。

注意：下面的課程中創(chuàng)建編輯文件都是用pico 文件名。

下一步，我們將把一些代碼移到一個額外的文件中content.js 并修改入口 entry.js：

 // content.js
 pico content.js
 // 編輯內容
 module.exports = "It works from content.js.";

 // 修改entry.js
 //document.write('It works.');
 document.write(require("./content.js")); // 添加content.js

編譯文件

 $ webpack ./entry.js bundle.js

更新您的瀏覽器窗口，您應該看到文本It works from content.js.

執(zhí)行成功，會顯示

  Hash: ef96fed65f6d3ebc0dd7
Version: webpack 1.12.9
Time: 91ms
  Asset  Size Chunks       Chunk Names
bundle.js 1.7 kB    0 [emitted] main
  [0] ./entry.js 133 bytes {0} [built]
  [1] ./content.js 97 bytes {0} [built]

Webpack 會分析入口文件，解析包含依賴關系的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。在頁面啟動時，會先執(zhí)行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執(zhí)行。

五.Loader介紹和使用

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。

Loader 可以理解為是模塊和資源的轉換器，它本身是一個函數(shù)，接受源文件作為參數(shù)，返回轉換的結果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。

loader 有以下這些特點：

1.Loader 可以通過管道方式鏈式調用，每個 loader 可以把資源轉換成任意格式并傳遞給下一個 loader ，但是最后一個 loader 必須返回 JavaScript。

2.Loader 可以同步或異步執(zhí)行。

3.Loader 運行在 node.js 環(huán)境中，所以可以做任何可能的事情。

4.Loader 可以接受參數(shù)，以此來傳遞配置項給 loader。

5.Loader 可以通過文件擴展名（或正則表達式）綁定給不同類型的文件。

6.除了通過 package.json 的 main 指定，通常的模塊也可以導出一個 loader 來使用。

7.Loader 可以訪問配置。

8.插件可以讓 loader 擁有更多特性。

9.Loader 可以分發(fā)出附加的任意文件。

我們想要在應用中添加一個css文件。

WebPACK只能處理JavaScript本身，所以我們需要css-loader去處理 CSS。我們還需要style-loader去應用這個樣式在CSS文件。

安裝 loader：

npm install css-loader style-loader

注意：安裝 loaders（只需要在本地安裝，不需 -g）將會創(chuàng)建一個 node_modules 文件夾，在哪里 loaders 將會激活。

我們要在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也看成是一個模塊，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。

添加一個style.css文件

 body {
  background: blue;
}

修改 entry.js：

  + require("!style!css!./style.css");  // 載入 style.css
 document.write(require("./content.js"));

重新編譯并更新您的瀏覽器看到藍色背景。

擴展名自動綁定loader

如果每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。

我們可以根據(jù)模塊類型（擴展名）來自動綁定需要的 loader這樣寫require("./style.css")。

修改entry.js

- require("!style!css!./style.css");
+ require("./style.css");
 document.write(require("./content.js"));

注意：-表示這行刪掉或者注釋掉，+表示新增的內容。

編譯:

webpack ./entry.js bundle.js --module-bind "css=style!css"

注意：！在shell中有特殊意義，需要轉義,這樣寫才會成功的

webpack ./entry.js bundle.js --module-bind "css=style!css"

六.配置文件

Webpack 在執(zhí)行的時候，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行。默認情況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者通過 --config 選項來指定配置文件。

我們想將配置選項移動到配置文件中，創(chuàng)建一個配置文件 webpack.config.js：

 module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /.css$/, loader: "style!css" }
    ]
  }
};

現(xiàn)在我們僅僅運行:

webpack

如果完成成功，將會返回運行結果，該命令將嘗試WebPACK當前目錄中加載文件webpack.config.js。

這里對Webpack的打包行為做了配置，主要分為幾個部分：

1. entry：指定打包的入口文件，每有一個鍵值對，就是一個入口文件
2. output：配置打包結果，path定義了輸出的文件夾，filename則定義了打包結果文件的名稱
3. module：定義了對模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當需要加載的文件匹配test的正則時，就會調用后面的loader對文件進行處理，這正是webpack強大的原因。
   

漂亮的輸出

如果該項目的增長，編譯可能需要更長的時間。所以我們要展示一些進度條。我們想要的顏色…

我們可以這樣

 webpack --progress --colors

七.插件

插件可以完成更多 loader 不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 選項中指定。

Webpack 本身內置了一些常用的插件，還可以通過 npm 安裝第三方插件。

接下來，我們利用一個最簡單的 BannerPlugin 內置插件來實踐插件的配置和運行，這個插件的作用是給輸出的文件頭部添加注釋信息。

修改 webpack.config.js，添加 plugins：

 var webpack = require('webpack');
module.exports = {
 entry: './entry.js',
 output: {
  path: __dirname,
  filename: 'bundle.js'
 },
 module: {
  loaders: [
   {test: /.css$/, loader: 'style!css'}
  ]
 },
 plugins: [
  new webpack.BannerPlugin('This file is created by mutouren')
 ]
}

然后運行 webpack，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：

/! This file is created by mutouren /
/**/ (function(modules) { // webpackBootstrap
/**/   // The module cache
/**/   var installedModules = {};
// 后面代碼省略......

一個 url-loader 來說，它會將樣式中引用到的圖片轉為模塊來處理，使用該加載器需要先進行安裝：

npm install url-loader

修改style.css文件

 body {
  color:#fff;
  background: url('./logo.png');
}

配置webpack.config.js文件

 module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /.css$/, loader: "style!css" },
      { test: /.(png|jpg)$/, loader: "url?limit=40000" }  // 添加到這
    ]
  }
};

注意后面那個limit的參數(shù)，當你圖片大小小于這個限制的時候，會自動啟用base64編碼圖片。

我們還是運行

webpack

將會看到背景圖片已設置成功。

八.在 Webpack 中使用別名

模塊別名定義，方便后續(xù)直接引用別名，無須多寫長長的地址，比如我們現(xiàn)在想要把scripts/jquery.min.jsjquery壓縮文件打包.

別名（resolve.alias） 是 Webpack 的一個配置項，它的作用是把用戶的一個請求重定向到另一個路徑，例如通過修改 webpack.config.js 配置文件，jquery為別名加入：

resolve: {
 alias: {
   jquery: "./scripts/jquery.min.js"
 }
}

例如我們之前不用別名，在entry.js中，想要把jquery打包

require('./scripts/jquery.min.js');

設置別名，就可以修改為

require('jquery');

這樣待打包的腳本中的 require('jquery'); 其實就等價于 require('./scripts/jquery.min.js'); 。通過別名的使用在本例中可以減少幾乎一半的時間。

我們把需要的jquery打包了，但是現(xiàn)在前臺頁面想要直接用還是不可以的，需要我們把jquery暴露出來。

你可能在全局中使用了一個壓縮版本的 jquery，為了修復你可以安裝這個暴露全局加載器

npm install expose-loader --save-dev

然后像下面這樣修改entry.js：

require('expose?$!jquery');

把$作為別名為jquery的變量暴露到全局上下文中。

現(xiàn)在我們在頁面就可以使用$，例如：

 $('h2').text();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。