vue之webpack

一、介紹：

　　1. js應用的子產品打包工具

二、webpack安裝

　　1. 環境：node環境

　　2.  npm install webpack -g 

　　　　說明：npm install 指令；webpack是工具名，可以指定版本如：[email protected]； -g表示全局安裝，如果不想全局安裝，僅為某項目安裝開發時依賴，可以在進入該項目目錄下執行安裝指令， 将-g改為--save-dev；--save表示為本項目安裝；-dev表示開發時依賴，運作時不需要使用時可以添加此option

　　　　整體案例：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 

　　　　注意：高版本需要添加-o作為option然後跟輸出目錄，生成的檔案名為main.js;

　　　　如：在5.58.3版本時，執行指令 webpack ./src/main.js -o ./dist/bundle.js ，會在dist目錄下生成bundle.js目錄，在bundle.js目錄中生成main.js檔案

　　2. webpack

　　　　說明：在webpack進行檔案配置之後，可以直接使用webpack打包，webpack會從配置中查找入口檔案和出口檔案進行打包；檔案名稱：webpack.config.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; 

　　　　　　　　二：

日期：2021-10-20