一、介紹：

　　1. js應用的模組打包工具

二、webpack安裝

　　1. 環境：node環境

　　2.npm install webpack -g

　　　　說明：npm install 命令；webpack是工具名，可以指定版本如：[email protected]； -g表示全域性安裝，如果不想全域性安裝，僅為某專案安裝開發時依賴，可以在進入該專案目錄下執行安裝命令， 將-g改為--save-dev

　　　　整體案例：npm install [email protected] --save-dev

　　3.webpack --version

　　　　說明：檢視webpack安裝版本，正確顯示說明安裝成功。注意：高版本webpack檢視版本時會讓安裝webpack腳手架（webpack-cli）

　　4.npm uninstall webpack -g

　　　　說明：移除webpack工具

三、webpack打包

　　1. webpack 入口js檔案 打包後的js檔名

　　　　說明：webpack是打包命令；入口檔案是專案的入口，如main.js；打包後的檔名是打包成功後輸出生成的檔名，如bundle.js

　　　　整體案例：webpack ./src/main.js ./dist/bundle.js

　　2. webpack

　　　　說明：在webpack進行檔案配置之後，可以直接使用webpack打包，webpack會從配置中查詢入口檔案和出口檔案進行打包；檔名稱：webpack.config.js

　　　　　　配置方式：

module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        // path必須為絕對路徑
        path: absolutePath,
        filename: 'bundle.js'　　　　　　　　
    }
} 

　　　　　　絕對路徑相對化：在專案目錄下執行npm init命令會生成package.json檔案，此時在webpack.config.js配置檔案中匯入path模組，此時就會從package.json或者全域性中查詢path包，使用包中的resolve函式拼接出path

　　　　　　匯入模組：const path = require('path')

　　　　　　拼接絕對路徑：path.resolve(__dirname, 'dist')

　　　　　　　　其中 __ditname是node中獲取的當前專案的資料夾絕對路徑

　　3.npm run ***

　　　　說明：npm run 命令可以用來執行指令碼命令，在配置好對映之後便可以使用

　　　　　　建立webpack打包對映：在package.json檔案中的scripts中新增命令對映：如 "build":"webpack"

　　　　　　在建立好上述對映之後，就可以使用npm run build進行打包構建，執行的就是webpack命令，使用的是配置資訊

　　　　此種打包方式會優先使用本地安裝的webpack

四、webpack擴充

　　1. loader安裝

　　　　通過npm安裝需要使用的loader；

　　2. loader配置

　　　　在webpack.confi.js中的module關鍵字下進行配置（去官網查詢相關loader和用法。webpack.js.org）

　　3. 整體案例：一：npm install css-loader --save-dev; npm install style-loader --save-dev;

　　　　　　　　二：

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }]
    }　　
}

日期：2021-10-20