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