webpack是什么

本質上，webpack 是一個用于現代 JavaScript 應用程式的_靜態模塊打包工具_，當 webpack 處理應用程式時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖對應映射到專案所需的每個模塊，并生成一個或多個 bundle，
以上解釋截圖自官網

為什么要使用webpack

我們在平常開發程序中可能經常遇到以下問題

1. 瀏覽器不支持less sass語法(缺乏樣式編譯功能)
2. 不支持es6/es7(缺乏babel編譯功能，把es6轉成es5)
3. 開發的時候要是我們修改一下代碼保存之后瀏覽器就自動更新就好了(缺乏熱更新功能)
4. 本地請求遠程介面會產生跨域問題(缺乏請求代理功能)
5. 專案要上線了，要是能一鍵壓縮代碼啊圖片什么的就好了（缺乏自動壓縮打包功能）

webpack就是為了解決以上種種問題的

webpack的五個核心概念

1.入口(entry)：入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始，進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的，

2.出口(output)：output 屬性告訴 webpack 在哪里輸出它所創建的 bundles，以及如何命名這些檔案，默認值為 ./dist，基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的檔案夾中

3.loader:loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript），loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理，

4.插件(plugins):loader 被用于轉換某些型別的模塊，而插件則可以用于執行范圍更廣的任務，插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變數，插件介面功能極其強大，可以用來處理各種各樣的任務

5.模式:通過選擇 development 或 production 之中的一個，來設定 mode 引數，你可以啟用相應模式下的 webpack 內置的優化
新的改變

開始使用

1.使用 npm init 初始化一個專案，并安裝webpack
2.npm i webpack webpack-cli -g // 全域安裝
3.npm i webpack webpack-cli -D //寫入到package.json的開發依賴中

4.按如下結構創建檔案

 |- package.json
+ |- index.html
+ |- /src
+   |- index.js

index.js檔案

function add(x,y){
    return x+y
}
console.log(add(1,2))

運行下面的指令就打包完成了

npx webpack

html檔案引入打包后的main.js檔案
html檔案放在dist目錄下

index.html

5.下面驗證一下json檔案是否能正常打包

src目錄下新建data.json檔案，內容如下

{
    "name":"小明",
    "age":18
}

index.js

import data from "./data.json";
console.log(data)
function add(x,y){
    return x+y
}
console.log(add(1,2))

重新打包

npx webpack

執行結果沒有問題

6.下面驗證css檔案是否能正常打包
src目錄下新建index.css,內容如下

html,body{
    height: 100%;
    background-color: pink;
}

index.js

import "./index.css"
import data from "./data.json";
console.log(data)
function add(x,y){
    return x+y
}
console.log(add(1,2))

重新打包

npx webpack

打包會報錯，說明webpack不能處理css/img資源

打包樣式資源

前面我們說過webpack無法處理樣式資源，如果要處理，需要引入loader，寫loader我們需要先寫一下webpack的組態檔，配置一下webpack 作用就是指揮webpack怎么干活，干哪些活
webpack的組態檔要求必須在根目錄下，名稱必須為webpack.config.js

在根目錄下創建webpack.config.js

//resolve是用來拼接絕對路徑的方法，path是node自帶的模塊可以直接引入
const {resolve} =require("path")
module.exports={
    //入口，指示webpack從哪個檔案開始打包
    entry:"./src/index.js",
    //出口，定義webpack的輸出
    output:{
    	//最終打包后輸出的檔案名
        filename:"bundle.js",
        //最終打包好的檔案輸出的位置 ，__dirname是node的一個變數，代表當前檔案的目錄的絕對路徑
        path:resolve(__dirname,"dist")
    },
    //loader的配置
    module:{   
    //定義規則，遇到什么型別的檔案應該呼叫 什么loader去處理
        rules:[
            {
                //匹配哪些檔案
                test:/\.css$/,
                //使用哪些loader進行處理
                //use陣列中loader執行順序，從右到左，從下到上，依次執行
                use:[
                    //style-loader的作用是創建一個標簽，將js中的css樣式資源插入進去，添加到頁面中的head中生效
                    'style-loader',
                    //css-loader的作用是將css檔案以字串的形式變成common.js的模塊加載到js中，內容是樣式字串
                    'css-loader'
                   
                ]
            }
        ]
    },
    //plugins的配置
    plugins:[

    ],
    //模式
    mode:"development"
}

我們這里用到了css-loader和style-loader兩個包,所以需要下載這兩個包

npm i css-loader style-loader -D

重新打包，運行成功

這個時候dist目錄下生成了一個bundle.js檔案默認是main.js但是因為我們改了配置所以生成了bundle.js改一下html的引入檔案，訪問html檔案，發現樣式生效了

2.那么是否能決議less檔案呢

src目錄下新建index.less

#title{
    color:yellow
}

src--index.js

import "./index.css"
import "./index.less"

打包–報錯，因為沒有配置less的loader
webpack.config.js配置一下，然后安裝less-loader和less

npm i less-loader -D
npm i less -D

組態檔做如下修改

index.html

<div id="title">hello
</div>

重新打包，文字樣式已經生效說明，less檔案成功執行

插件

先安裝插件

npm i html-webpack-plugin -D

引入webpack插件
功能:默認會創建一個新的html檔案，自動引入打包輸出的所有資源(js/css)

webpack.config.js添加如下配置，其他配置不用動

	const HtmlWebpackPlugin=require("html-webpack-plugin")
  //plugins的配置
    plugins:[
		new HtmlWebpackPlugin()
    ],

運行打包 npx webpack
會發現多了一個html檔案

目前輸出的是一個空的html檔案，如果我需要一個有結構的html檔案應該怎么辦，
修改一下配置

這樣重新打包，webpack生成的html會自動復制src里面的index.html的內容，并自動引入打包輸出的所有資源(js/css)

打包圖片資源

src目錄下新建img檔案夾，放入一張圖片

src--index.html

src--index.css

運行 npx webpack打包會發現報錯了

報錯的原因正是因為我們引入的那種圖片 ，因為webpack不能處理圖片資源
所以我們需要對圖片進行處理，同樣也是用loader

1.先下載兩個loader

npm i url-loader file-loader -D

2.修改webpack.config.js

運行打包 npx webpack
如果圖片大于8kb會發現是正常打包的，如果圖片小于8kb，會被base64處理，得到的路徑是類似這樣的

但是這種情況處理不了img標簽引入的圖片，因為打包之后檔案名都變了，所以你引入的那個檔案就找不到了

再加入一個loader

npm i html-loader -D

運行打包，發現還是不行，引入的路徑是個物件

問題：

url-loader默認使用es6模塊決議，
但是html-loader使用的是common.js,決議會出問題
解決：關閉url-loader的es6模塊化，使用commonjs決議

重新運行 npx webpack就沒問題了
如果嫌打包之后的圖片名字太長，可以進行處理

devServer

目前我們的每次修改都需要重新打包，不然總是顯示之前的效果，此時我們需要創建一個服務器幫助我們解決這個問題

1.先下載這個服務

npm i webpack-dev-server -D

2.webpack.config.js撰寫配置

3.啟動服務器

npx webpack  serve

此時如果修改別的檔案，會發現頁面自動就更新了不需要重新打包

打包優化

目前我們打包的html檔案 css檔案 img檔案 js檔案都直接存放到dist根目錄了，很亂，能不能按照檔案夾歸類好

webpack.config.js

js輸出優化：直接在filename后面加上檔案夾的名字重新打包即可

img輸出優化

css不需要優化，因為css都嵌入到js中了
重新運行npx webpack即可完成打包，就能看到打包好的檔案就已經分類好了

提取css檔案

1.首先下載插件

npm i mini-css-extract-plugin -D

2.修改配置vue.config.js

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

3.洗掉style-loader 替換為我們的loader
因為style-loader的作用是創建style標簽插入樣式，但是我們現在是一個單獨的css檔案不需要style標簽

4.運行打包
如果報錯，加一個下面的配置

壓縮css

1.下載插件

npm i optimize-css-assets-webpack-plugin -D

2.更改配置 webpack.config.js

const OptimizeCssAssetsWebpackPlugin=require("optimize-css-assets-webpack-plugin") 

npx webpack 

就能看到css代碼經過了壓縮

性能優化

開發環境優化
優化打包構建速度
示例
新建a.js和b.js檔案，分別匯出一個函式

在index.js檔案中引入并呼叫

此時發現控制臺輸入了a和b，如果此時我修改了a.js檔案的輸出，那么會發現整個頁面重新重繪了，b頁面也重新執行了一次，那么問題來了，如果我這個專案有一百個js檔案，當我修改了其中一個檔案之后，其他99個檔案并沒有修改但也是重新執行了，這種效率肯定很浪費

引入一個新的東西來解決這個問題叫HMR

HMR:hot module replacement 熱模塊替換

作用：一個模塊發生變化，只會重新打包這一個模塊而不是所有模塊
極大提升構建速度

使用方法，只需要在服務器配置加入hot：true就可以，注意需要重啟服務

此時修改樣式檔案，會發現只有某個樣式進行重新渲染了，如下

接下來修改js檔案，改變a檔案的輸出，發現整個頁面還是被重新加載了，
因為js檔案默認不能使用HMR功能
添加支持HMR功能的代碼

html檔案也不能使用hmr功能（也不需要使用），并且也不能熱更新，修改html檔案并不會直接更新界面
解決：修改entry入口，將html檔案引入,但是hmr還是不生效，因為我們的專案html檔案
就只有一個，所以當html更改，這個檔案一定會更新，不像是js檔案有多個，可以單獨
更新某一個

優化代碼除錯

source-map:一種提供源代碼到構建后代碼映射技術（如果構建后代碼出錯了，通過映射關系可以追蹤到源代碼錯誤），只需做下面配置即可