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實踐指南》 已出版