打包利器webpack

時間 2019-11-12

標籤打包利器 webpack 简体版

原文原文鏈接

什麼是 Webpack

Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。css

爲何重複造輪子

　　市面上已經存在的模塊管理和打包工具並不適合大型的項目，尤爲單頁面 Web 應用程序。最緊迫的緣由是如何在一個大規模的代碼庫中，維護各類模塊資源的分割和存放，維護它們之間的依賴關係，而且無縫的將它們整合到一塊兒生成適合瀏覽器端請求加載的靜態資源。html

這些已有的模塊化工具並不能很好的完成以下的目標：node

將依賴樹拆分紅按需加載的塊
初始化加載的耗時儘可能少
各類靜態資源均可以視做模塊
將第三方庫整合成模塊的能力
能夠自定義打包邏輯的能力
適合大項目，不管是單頁仍是多頁的 Web 應用

Webpack的特色和優點

Webapck 和其餘模塊化工具備什麼區別呢？webpack

代碼拆分 Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴做爲分割點，造成一個新的快。在優化了依賴樹後，每個異步區塊都做爲一個文件被打包。web

Loader Webpack 自己只能處理原生的 JavaScript 模塊，可是 loader 轉換器能夠將各類類型的資源轉換成 JavaScript 模塊。這樣，任何資源均可以成爲 Webpack 能夠處理的模塊。npm

智能解析 Webpack 有一個智能解析器，幾乎能夠處理任何第三方庫，不管它們的模塊形式是 CommonJS、 AMD 仍是普通的 JS 文件。甚至在加載依賴的時候，容許使用動態表達式 require("./templates/" + name + ".jade")。json

插件系統 Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基於這個插件系統運行的，還能夠開發和使用開源的 Webpack 插件，來知足各式各樣的需求。瀏覽器

快速運行 Webpack 使用異步 I/O 和多級緩存提升運行效率，這使得 Webpack 可以以使人難以置信的速度快速增量編譯。緩存

環境瞭解

咱們在當前的環境中指定的目錄是在 /home/hubwiz/web下，才能夠進行訪問測試。異步

可使用命令pwd查看咱們當前指定的目錄。

$ pwd
/home/hubwiz/web

pwd命令用於顯示當前目錄。在環境中這個倉庫位於/home/hubwiz/web。

咱們在指定的目錄下，預置一個靜態頁面（index.html）和一張logo圖片，以及style.css文件，在後面的課程知識點中編譯以後，訪問測試，將會看到你編譯的效果。

$ ls
index.html logo.png node_modules style.css scripts

node_modules中是咱們預置好的幾個模塊,能夠查看。

index.html頁面中預置

<h1>歡迎學習Webpack課程！</h1>

安裝

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

用 npm 安裝 Webpack：

$ npm install webpack -g

此時 Webpack 已經安裝到了全局環境下，本課程中咱們已裝好webpack，能夠經過命令行 webpack -h 試試。

一般咱們會將 Webpack 安裝到項目的依賴中，這樣就可使用項目本地版本的 Webpack。

#進入項目目錄
#肯定已經有 package.json，沒有就經過 npm init 建立
#安裝 webpack 依賴
$ npm install webpack --save-dev

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

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

使用

首先能夠先寫個簡單的靜態頁面 index.html。

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

以後建立一個 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]

更多內容如 Loader，加載css，插件等請參考： http://www.hubwiz.com/course/5670d0a77e7d40946afc5e65

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。