Unity 生成 Android App Bundle(aab) （二）

阿新 • • 發佈：2021-10-22

概述

webpack是node工作流工具，是一個模組打包器。它的主要目的是將JavaScript的檔案打包到一起，打包將複雜的、瀏覽器不識別的檔案、語法變為瀏覽器識別的檔案和語法後用於在瀏覽器中使用

官網地址：https://webpack.docschina.org/

webpack的核銷思想就是下面的圖示：

webpack的基本使用

安裝webpack的相關依賴

我們需要-g全域性安裝webpack和webpack-cli

npm install webpack webpack-cli -g

我們可以通過-v來檢視版本號

在src資料夾中新建一個index.js檔案

function fun(a,b){
     
return a +b;
}
console.log(fun(1,2))

此時輸入打包命令，注意webpack5和webpack4打包的時候會有稍許的不同，webpack5進行的是資料夾的建立，webpack4一下建立的是資料夾和檔案

webpack ./src/index.js -o ./build/build.js --mode=development

表示將./src/index.js檔案的內容打包到./build/build.js檔案中，如果是webpack5,就表示build.js資料夾中的main.js，--mode=development表示的是打包開發環境

此時我們的build檔案中就有了webpack打包的程式碼

還有一種打包方式是生產環境的打包

webpack ./src/index.js -o ./build/build.js --mode=production

production打包的程式碼會進行壓縮

production和development的區別

webpack進行打包的時候分為兩種，一種是development（開發環境）面向開發者，一種是production（生產環境）面向使用者

無論是開發環境還是生產環境，都是將ES6模組化編譯為瀏覽器能識別的語法

兩者有什麼區別？

安裝依賴的時候是有區別的，之前安裝依賴的時候都是輸入—-save **，比如

npm install –-save express或者 npm install express -S

此時的依賴無論是開發還是生產都需要用得到

如果只要是在開發環境用到的依賴，比如我們的webpack打包編譯，在生產環境是不需要的，所以我們就單獨給安裝開發依賴 –-save -dev

npm install –-save -dev webpack 或者 npm install webpack -D

這種打包方式是有侷限的，比如我們要打包css檔案，此時會報錯

基本配置

需要有指導檔案，指導webpack如何進行打包，webpack是依賴webpack.config.js來進行配置的

webpack.config.js的配置

const {resolve}=require("path")
module.exports={
    //入口檔案
    entry:"./src/index.js",
    //出口檔案
    output:{
        //輸出檔名
        filename:"build.js",
        //輸出路徑
        //__dirname表示當前資料夾的絕對路徑
        path:resolve(__dirname,"build")
    },
    //打包模式development表示開發，production表示生產
    mode:"development"
}

此時輸入命令webpack打包即可

配置樣式

如果我們要打包樣式檔案，需要配置相關的loader

index.js中只引入了css檔案

import "./index.css"

配置哪些loader就需要這些loader的依賴

此時我們需要配置css，所以我們需要安裝css，style的相關依賴

npm install style-loader css-loader -D

const {resolve}=require("path")
module.exports={
    //入口檔案
    entry:"./src/index.js",
    //出口檔案
    output:{
        //輸出檔名
        filename:"build.js",
        //輸出路徑
        //__dirname表示當前資料夾的絕對路徑
        path:resolve(__dirname,"build")
    },
    //配置相關的loader
    module:{
        //配置規則，內部是json配置項，每一個json就代表一個loader
        rules:[
            {
                //引導打包檔案和編譯的檔案為css檔案
                test:/\.css$/,
                //內部執行哪些loader，loader的執行順序是倒序的，後寫的先執行 
                use:[
                     // 識別css-laoder的js字串為樣式程式碼，新增到head標籤
                    'style-loader',
                    // css-loader是將樣式的程式碼翻譯為js的模式，內部是樣式的字串
                    'css-loader'
                ]
            }
        ]
    },
    //打包模式development表示開發，production表示生產
    mode:"development"
}

此時打包css檔案成功

如果還想配置less

需要安裝less相關的loader

npm install less less-loader -D

const {resolve}=require("path")
module.exports={
    //入口檔案
    entry:"./src/index.js",
    //出口檔案
    output:{
        //輸出檔名
        filename:"build.js",
        //輸出路徑
        //__dirname表示當前資料夾的絕對路徑
        path:resolve(__dirname,"build")
    },
    //配置相關的loader
    module:{
        //配置規則，內部是json配置項，每一個json就代表一個loader
        rules:[
            {
                //引導打包檔案和編譯的檔案為css檔案
                test:/\.css$/,
                //內部執行哪些loader，loader的執行順序是倒序的，後寫的先執行 
                use:[
                     // 識別css-laoder的js字串為樣式程式碼，新增到head標籤
                    'style-loader',
                    // css-loader是將樣式的程式碼翻譯為js的模式，內部是樣式的字串
                    'css-loader'
                ]
            },
            {
                //引導打包檔案和編譯的檔案為css檔案
                test:/\.less$/,
                //內部執行哪些loader，loader的執行順序是倒序的，後寫的先執行 
                use:[
                     // 識別css-laoder的js字串為樣式程式碼，新增到head標籤
                    'style-loader',
                    // css-loader是將樣式的程式碼翻譯為js的模式，內部是樣式的字串
                    'css-loader',
                    // less-loader的作用是將less檔案變為css檔案
                    'less-loader'          
                ]
            }
        ]
    },
    //打包模式development表示開發，production表示生產
    mode:"development"
}

配置html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>12345789</h1>
</body>
</html>

上面的html檔案沒有任何的引入，沒有script標籤

index.js

function fun(a, b) {
  return a + b;
}

console.log(add(1,2))

上面的js檔案也沒有任何的檔案引入，沒有require或者import

此時我們需要配置打包html模板的plugin外掛

npm install html-webpack-plugin -D

const {resolve}=require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports={
    //入口檔案
    entry:"./src/index.js",
    //出口檔案
    output:{
        //輸出檔名
        filename:"build.js",
        //輸出路徑
        //__dirname表示當前資料夾的絕對路徑
        path:resolve(__dirname,"build")
    },
    //配置相關的loader
    module:{
        //配置規則，內部是json配置項，每一個json就代表一個loader
        rules:[
            {
                //引導打包檔案和編譯的檔案為css檔案
                test:/\.css$/,
                //內部執行哪些loader，loader的執行順序是倒序的，後寫的先執行 
                use:[
                     // 識別css-laoder的js字串為樣式程式碼，新增到head標籤
                    'style-loader',
                    // css-loader是將樣式的程式碼翻譯為js的模式，內部是樣式的字串
                    'css-loader'
                ]
            },
            {
                //引導打包檔案和編譯的檔案為css檔案
                test:/\.less$/,
                //內部執行哪些loader，loader的執行順序是倒序的，後寫的先執行 
                use:[
                     // 識別css-laoder的js字串為樣式程式碼，新增到head標籤
                    'style-loader',
                    // css-loader是將樣式的程式碼翻譯為js的模式，內部是樣式的字串
                    'css-loader',
                    // less-loader的作用是將less檔案變為css檔案
                    'less-loader'          
                ]
            }
        ]
    },
    plugins: [
        // 配置html的檔案
        new HtmlWebpackPlugin({
          // template表示是引入的模板檔案地址
          template: './src/index.html'
        })
      ],    
    //打包模式development表示開發，production表示生產
    mode:"development"
}