webpack介紹—上

6.1 webpack概念的引入

　　在網頁中會引用哪些常見的靜態資源？

• JS

　　.js、 .jsx 、.coffee、 .ts（TypeScript 類 C# 語言）

•  CSS

　　.css、 .less、 .sass 、.scss

• Images

　　.jpg 、.png、 .gif 、.bmp 、.svg

•  字體文件（Fonts）

　　.svg、 .ttf、 .eot、 .woff、 .woff2

•   模板文件

　　.ejs 、.jade、 .vue（這是在webpack中定義組件的方式，推薦這麼用）

　　說明：SCSS 是 Sass 3 引入新的語法，其語法完全相容 CSS3，並且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定於瀏覽器的語法。

　　網頁中引入的靜態資源多了以後有什麼問題？

• 網頁載入速度慢， 因為 我們要發起很多的二次請求；
• 要處理錯綜複雜的依賴關係；

　　如何解決上述兩個問題？

• 合併、壓縮、精靈圖（雪碧圖）、圖片的Base64編碼；
• 處理依賴關係可以使用requireJS、也可以使用webpack解決各個包之間的複雜依賴關係；

　　對應的技術方案：

• 使用Gulp進行壓縮合併， 它是基於 task 任務的；
• 使用Webpack， 它是基於整個項目進行構建的；

　　說明：並不是所有的圖片都適合採用Base64編碼，通常只有一些小圖片適合這樣做。

　　如果我們的項目比較大的情況下，使用Gulp，會創建許多的task任務，比較麻煩。所以它通常適合一些小的模塊構建。

　　什麼是精靈圖？

　　css精靈(CSS sprites)是一種網頁圖片應用處理技術。主要是指將網頁中需要的零星的小圖片集成到一個大的圖片中。

　　什麼是webpack?

　　webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具；藉助於webpack這個前端自動化構建工具，可以完美實現資源的合併、打包、壓縮、混淆等諸多功能。

webpack官網地址：http://webpack.github.io/。

6.2 webpack-最基本的使用方式

　　webpack安裝的兩種方式

• 運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令。
• 在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中。

　　接下來，我們通過一個隔行變色的示例來演示webpack的基本使用。首先安裝webpack，然後新建一個項目，目錄如下圖所示：

 　　我們經常從網上下載一些第三方的安裝包的時候，也經常會看到dist目錄和src目錄，dist目錄是編譯後的文件目錄，src是源碼目錄。main.js這是項目的核心文件，全局的配置都在這個文件裡面配置，index.html是首頁入口文件。

　　1. 安裝webpack：npm i webpack-g

　　查看webpack版本：

　　C:\Users\zouqi>webpack -v

　　4.30.0

　　2. 安裝jquery

　　npm i jquery -S

　　index.html代碼如下：

<div id="app">
        <ul>
            <li>馮錫範---一劍無血</li>
            <li>陳近南---平生不見陳近南，便稱英雄也枉然</li>
            <li>胡逸之---百勝刀王</li>
            <li>九難師太---獨臂神尼</li>
        </ul>
    </div>
    <script src="./main.js"></script>

　　main.js代碼如下：

import $ from 'jquery'
$(function () {
  $('li:odd').css('backgroundColor', 'lightblue')
  $('li:even').css('backgroundColor', 'lightgreen')
})

　　註意： 如果要通過路徑的形式，去引入 node_modules 中相關的文件，可以直接省略 路徑前面的 node_modules 這一層目錄，直接寫包的名稱，然後後面跟上具體的文件路徑。

　　例如：import $ from 'jquery'等價於：

　　import $ from '/node_modules/jquery/dist/jquery.js'

　　此時，我們在瀏覽器中運行index.html，我們看下效果：

　　我們會發現隔行變色無效，並且控制台報錯了。這是因為 import xx from xx 是ES6中導入模塊的方式，而 ES6的代碼太高級了，瀏覽器解析不了，所以這一行執行會報錯，如果想要瀏覽器能夠解析ES6的代碼，我們可以將其通過webpack編譯為瀏覽器可以解析的正常js語法。

　　3.運行webpack打包

　　webpack ./src/main.js --output-filename ./bundle.js --mode development

　　解析：通過 webpack 這麼一個前端構建工具， 把 main.js 做了一下處理，生成了一個 bundle.js 的文件。

　　運行結果如下所示：

PS D:\WorkSpace\vue_book\codes\chapter6\webpack-learn>
webpack ./src/main.js --output-filename ./bundle.js --mode development
Hash: 57bb64f9c2f92092305b
Version: webpack 4.30.0
Time: 381ms
Built at: 2019-05-08 20:30:17
      Asset     Size  Chunks             Chunk Names
./bundle.js  314 KiB    main  [emitted]  main
Entrypoint main = ./bundle.js
[./src/main.js] 138 bytes {main} [built]
    + 1 hidden module

　　命令格式： webpack  要打包的文件的路徑 打包好的輸出文件的路徑 打包模式（webpack4新增）

　　4. 修改index.html中的js引用

   <!-- <script src="./main.js"></script> -->

    <script src="../dist/bundle.js"></script>

　　運行結果如下：

　　我們發現，在index.html中，我們只需要引入打包後的bundle.js這個文件，如果不採用webpack打包，我們直接在index.html頁面中引入文件，至少要引入兩個，一個是jquery.js，一個是main.js，而且這兩個文件我們可能還要單獨去進行代碼壓縮。

　　註意：

　　不推薦直接在index.html里引用任何包和任何CSS文件，而應該在main.js中通過import引用。

　　每次我們修改了main.js中的代碼，都需要重新運行webpack命令進行打包，代碼才會生效。因為我們index.html中最終引用的是bundle.js文件。

　　經過上面的示例，Webpack 可以做什麼事情？

　　1. webpack 能夠處理 JS 文件的互相依賴關係。

　　2. webpack 能夠處理JS的相容問題，把高級的、瀏覽器不識別的語法，轉為低級的，瀏覽器能正常識別的語法。

6.3 webpack-最基本的配置文件的使用

       在前面的示例中，我們發現每次都要運行webpack 要打包的文件的路徑 打包好的輸出文件的路徑 打包模式，這樣執行起來非常繁瑣。我們可以通過配置文件來讓操作變得更加簡單。

       如果不做任何配置，直接運行命令webpack，會出現如下錯誤提示：

webpack
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

       在項目根目錄下創建一個webpack.config.js(預設，可修改)文件來配置webpack。這個配置文件，其實就是一個 JS 文件，通過 Node 中的模塊操作，向外暴露了一個配置對象，其代碼結構如下：

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 處理對應模塊
    plugins: [],             // 對應的插件
    devServer: {},           // 開發伺服器配置
    mode: 'development'      // 模式配置
}

　　由於運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在webpack.config.js中配置這兩個路徑。根據項目的代碼結構，我們來寫一下最基本的webpack配置：

// 導入處理路徑的模塊
const path = require("path");
// 導出一個配置對象
module.exports = {
  entry: path.join(__dirname, "./src/main.js"), // 項目入口文件
  output: { // 配置輸出選項
    path: path.join(__dirname, "./dist"), // 配置輸出的路徑
    filename: "bundle.js" // 配置輸出的文件名
  },
  mode: "development" // 模式配置
};

　　然後再來運行webpack，這次，我們發現運行成功了，運行結果和前面執行：webpack ./src/main.js --output-filename ./bundle.js --mode development 命令是一樣的。

　　思考： 當我們在控制台，直接輸入 webpack 命令執行的時候，webpack 做了什麼？

　　1. 首先，webpack 發現我們並沒有通過命令的形式，給它指定入口和出口。

　　2. 於是webpack 就會去項目的根目錄中查找一個叫做 “webpack.config.js”的配置文件。

　　3. 當找到配置文件後，webpack 會去解析執行這個配置文件，當解析執行完配置文件後，就得到了配置文件中，導出的配置對象。

　　4. 當 webpack 拿到配置對象後，就拿到了配置對象中，指定的入口和出口，然後進行打包構建。

6.4 webpack-dev-server的基本使用

       假設我們每次修改了main.js中的代碼，我們都需要手動運行webpack打包的命令，然後去刷新瀏覽器才能看到最新的代碼效果，這樣操作起來很麻煩，我們希望有那種“熱更新”的機制，當修改代碼之後，會自動進行打包構建，然後馬上能夠在瀏覽器中看到最新的運行效果。

　　所謂熱替換,就是在不刷新網頁的情況下,改變代碼後,會自動編譯並更新頁面內容。

　　我們可以使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能。

　　安裝

　　運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴。

　　安裝完成之後，直接在控制台運行：webpack-dev-server，會報錯：

　　webpack-dev-server : 無法將“webpack-dev-server”項識別為 cmdlet、函數、腳本
　　文件或可運行程式的名稱。請檢查名稱的拼寫，如果包括路徑，請確保路徑正確，然後再試一次。

　　這是因為我們是在項目中進行本地安裝的 webpack-dev-server ， 所以無法把它當作 腳本命令，在powershell 終端中直接運行（只有那些安裝到全局-g 的工具，才能在終端中正常執行）。此時我們需要藉助於package.json文件中的指令，來進行運行webpack-dev-server命令。

　　修改package.json中scripts下麵的dev節點，將"webpack --mode development"修改為"webpack-dev-server"。

  "scripts": {
    "dev": "webpack-dev-server",

　　註意： webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中，必須安裝 webpack。package.json屬於json文件，而json文件中是不能寫註釋的哦。

　　webpack4.x將CLI抽離出為單獨的包webpack-cli,需要npm install webpack-cli -D單獨全局安裝不然無法進行編譯。

　　運行命令：npm install webpack webpack-cli webpack-dev-server --save-dev 進行安裝。

　　執行運行：npm run dev，運行結果如下所示：

npm run dev
> webpack-learn@1.0.0 dev D:\WorkSpace\vue_book\codes\chapter6\webpack-learn
> webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8080/

　　就可以http://localhost:8080訪問了，此時訪問webpack-dev-server啟動的http://localhost:8080/網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，由於此時引用不到bundle.js文件，所以需要修改index.html中script的src屬性為/bundle.js。

   <script src="/bundle.js"></script>

　　webpack-dev-server 幫我們打包生成的 bundle.js 文件，並沒有存放到實際的物理磁碟上；而是直接托管到了電腦的記憶體中，所以，我們在項目根目錄中，根本找不到這個打包好的 bundle.js;。webpack-dev-server 把打包好的文件，以一種虛擬的形式，托管到了咱們項目的根目錄中，雖然我們看不到它，但是可以認為， 它和 dist、src 、node_modules 平級，只是看不見，它的文件叫做 bundle.js。

　　把bundle.js放在記憶體中的好處是：由於需要實時打包編譯，所以放在記憶體中速度會非常快。

　　更多內容請移步至：《Vue.js 2.x實踐指南》 已出版