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="https://www.cnblogs.com/jiekzou/p/main.js"></script> -->
<script src="https://www.cnblogs.com/jiekzou/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實踐指南》 已出版
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/62335.html
標籤：JavaScript
上一篇：自定義rem適配