Webpack4 配置 Entry

entry是配置模塊的入口，可抽象成輸入，Webpack 執行構建的第一步將從入口開始搜尋及遞歸解析出所有入口依賴的模塊。

entry 配置是必填的，若不填則將導致 Webpack 報錯退出。

簡單的配置代碼：( 在 webpack.config.js 文件下配置 )

module.exports = {
  // 1.JavaScript 執行入口文件
  entry: './src/main.js',
  .......
    
};

1.Entry的類型

Entry 類型可以是以下三種中的一種或者相互組合：

類型	例子	含義
string	`'./app/entry'`	入口模塊的文件路徑，可以是相對路徑。
array	`['./app/entry1', './app/entry2']`	入口模塊的文件路徑，可以是相對路徑。
object	`{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}`	配置多個入口，每個入口生成一個 Chunk

如果是 array 類型，則搭配 output.library 配置項使用時，只有數組裏的最後一個入口文件的模塊會被導出。

什麼是Chunk？

Chunk是代碼塊的意思，Webpack在執行構建的時候，會把多個模塊合併爲一個文件，該文件就稱爲Chunk。

Webpack 會爲每個生成的 Chunk 取一個名稱，Chunk 的名稱和 Entry 的配置有關：

如果 entry 是一個 string 或 array，就只會生成一個 Chunk，這時 Chunk 的名稱是 main；
如果 entry 是一個 object，就可能會出現多個 Chunk，這時 Chunk 的名稱是 object 鍵值對裏鍵的名稱。

2.字符串類型Entry

新建一個項目，目錄結構如下圖

|-- src
|   |                               `-- common.js
|   |                               `-- index.html
|                                   `-- main.js
`-- webpack.config.js

webpack.config.js 是項目中 Webpack 的配置文件：

// 1.從 node環境 中導入 path 模塊
const path = require('path');

// 2.聲明導出一個 對象
module.exports = {
  // 3.JavaScript 執行入口文件
  entry: './src/main.js',
  output: {
    // 4.輸出 bundle.js 文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  }
};

main.js是 Webpack 打包入口文件:

// 1.通過 CommonJS 規範導入 showHelloWorld 函數
const showHelloWorld = require('./common.js');
// 2.執行 showHelloWorld 函數
showHelloWorld('Webpack的安裝和使用');

common.js 是項目存放公共代碼文件：

function showHelloWorld(content) {
  alert('hello world')
}

// 通過 CommonJS 規範導出 showHelloWorld 函數
module.exports = showHelloWorld;

index.html 是項目的首頁：

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--導入 Webpack 輸出的 JavaScript 文件-->
<script src="../dist/main.js"></script>
</body>
</html>

執行webpack命令打包後輸出的目錄結構：( 多出了一個main.js 文件 )

|-- dist
|                   `-- main.js
|-- src
|   |               `-- common.js
|   |               `-- index.html
|                   `-- main.js
`-- webpack.config.js

注意：

Webpack3執行 webpack 命令後打包出來的 main.js 文件是沒有壓縮的；

Webpack4執行 webpack 命令打包出來的main.js文件是壓縮過，想打包後的文件沒壓縮可執行下面命令：

webpack --mode development 打包後沒壓縮

webpack --mode production 打包後壓縮

webpack 打包後壓縮

3.數組類型Entry

新建一個項目，目錄結構如下圖

|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   `-- myjQuery.js
`-- webpack.config.js

webpack.config.js 是項目中 Webpack 的配置文件：

// 1.從 node環境 中導入 path 模塊
const path = require('path');

// 2.聲明導出一個 對象
module.exports = {
  // 3.JavaScript 執行入口文件
  entry: ['./src/main.js', './src/myjQuery.js'],
  output: {
    // 5.輸出 bundle.js 文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  }
};

main.js是 Webpack 第一個打包入口文件:

// 1.通過 CommonJS 規範導入 showHelloWorld 函數
const showHelloWorld = require('./common.js');
// 2.執行 showHelloWorld 函數
showHelloWorld('Webpack的安裝和使用');

common.js 是項目存放公共代碼文件：

function showHelloWorld(content) {
  alert('hello world')
}

// 通過 CommonJS 規範導出 showHelloWorld 函數
module.exports = showHelloWorld;

myJQuery.js 是第二個打包入口文件：

alert("我是myJQuery.js文件")

index.html 是項目的首頁：

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--導入 Webpack 輸出的 JavaScript 文件-->
<script src="../dist/main.js"></script>
</body>
</html>

執行webpack --mode development命令打包後輸出的目錄結構：( 多出了一個main.js 文件 )

|-- dist
|   `-- main.js
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   `-- myjQuery.js
`-- webpack.config.js

查看打包後的main.js文件的簡單源碼代碼：

// 2.modules 是下面傳遞過來的參數 
(function(modules) { // webpackBootstrap

 	// The require function
 	function __webpack_require__(moduleId) {

 		// Check if module is in cache
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

 		// Execute the module function
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 		// Flag the module as loaded
 		module.l = true;

 		// Return the exports of the module
 		return module.exports;
   }
   
   // ......
   // ......
   // ......

 	// Load entry module and return exports
    // 3.使用 __webpack_require__ 去加載 index 爲 0 的模塊，並且返回該模塊導出的內容
    // index 爲 0 的模塊就是 main.js 對應的文件，也就是執行入口模塊
    // __webpack_require__.s 的含義是啓動模塊對應的 index
 	return __webpack_require__(__webpack_require__.s = 0);
 })

// 1.這個對象會被傳遞到上面的modules中( 在webpack3以前這個是一個數組，webpack4以後變成了對象 )
 ({

  "./src/common.js":(function(module, exports) {
    eval("\r\nfunction showHelloWorld(content) {\r\n  alert('hello world')\r\n}\r\n\r\n// 通過 CommonJS 規範導出 showHelloWorld 函數\r\nmodule.exports = showHelloWorld;\n\n//# sourceURL=webpack:///./src/common.js?");
  }),
  
  // 6.main.js加載__webpack_require__('./common.js') 
  // 7.加載完common.js後調用 showHelloWorld() 函數
  "./src/main.js":(function(module, exports, __webpack_require__) {
    eval("// 1.通過 CommonJS 規範導入 showHelloWorld 函數\r\nconst showHelloWorld = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r\n// 2.執行 showHelloWorld 函數\r\nshowHelloWorld('Webpack的安裝和使用');\n\n//# sourceURL=webpack:///./src/main.js?");
  }),

  // 9.執行myjQuery.js 中的 alert 函數    
  "./src/myjQuery.js":(function(module, exports) {
    eval("alert(\"我是myJQuery.js文件\")\n\n//# sourceURL=webpack:///./src/myjQuery.js?");
  }),
      
  // 4.加載 是入口模塊（因爲配置了entry爲數據，下面加載入口會有多個）
  0:(function(module, exports, __webpack_require__) {
     // 5.第一個入口，加載__webpack_require__('./src/main.js')
     // 8.第二個入口，加載__webpack_require__('./src/myjQuery.js') 並聲明導出
    eval("__webpack_require__(/*! ./src/main.js */\"./src/main.js\");\nmodule.exports = __webpack_require__(/*! ./src/myjQuery.js */\"./src/myjQuery.js\");\n\n\n//# sourceURL=webpack:///multi_./src/main.js_./src/myjQuery.js?");
  })

});

上面的源碼只是從打包后里抽取的核心代碼，其中代碼執行的順序上面標有序號。其中entry配置爲數組和字符串的區別就是第4步加載的入口個數。如果是數組，將會有多個加載的入口，如果爲字符串將會只有一個加載的入口。

注意：

webpack3 以前 modules 接收的參數是數組；webpack4 中的 modules 接收的參數是對象；

4.對象類型Entry

1.對象簡單語法

webpack.config.js` 是項目中 Webpack 的配置文件：

// 1.從 node環境 中導入 path 模塊
const path = require('path');

// 2.聲明導出一個 對象
module.exports = {
  // 3.JavaScript 執行入口文件是一個對象( 全寫 )
  entry: {
    main:'./src/main.js'
  },
  output: {
    // 5.輸出 bundle.js 文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  }
};

上面這種寫法是下面這種寫法的全寫：

// 1.從 node環境 中導入 path 模塊
const path = require('path');

// 2.聲明導出一個 對象
module.exports = {
  // 3.JavaScript 執行入口文件( 簡寫 )
  entry: './src/main.js',
  output: {
    // 4.輸出 bundle.js 文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  }
};

2.對象標準語法

語法：entry: { [entryChunkName: string]: string | Array }

新建一個項目，目錄結構如下圖

|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   `-- myjQuery.js
`-- webpack.config.js

webpack.config.js` 是項目中 Webpack 的配置文件：

const path = require('path');

module.exports = {
  // app  是指定入口代碼塊的名稱（打包輸出的文件默認以這個命名）
  // './src/main.js'  是加載的入口文件   
  entry: {
    app:'./src/main.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
  }
};

其它文件的內容和上面保持不變

執行webpack --mode development命令打包後輸出的目錄結構：( 多出了一個app.js 文件 )

|-- dist
|   `-- app.js
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   `-- myjQuery.js
`-- webpack.config.js

3.多頁面多入口語法

webpack.config.js` 是項目中 Webpack 的配置文件：

const path = require('path');

module.exports = {
  // home  是指定第一個入口代碼塊的名稱（打包輸出的文件默認以這個命名）
  // about 是指定第二個入口代碼塊的名稱（打包輸出的文件默認以這個命名）
  entry: {
    home:'./src/main.js',
    about:'./src/myjQuery.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
  }
};

其它文件的內容和上面保持不變

執行webpack --mode development命令打包後輸出的目錄結構：( 多出了about.js 和 home.js文件 )

|-- dist
|   |-- about.js
|   `-- home.js
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   `-- myjQuery.js
`-- webpack.config.js

5.函數類型(動態)的Entry

entry 也可以接收一個函數，好處是在函數裏面可以通過for循環可以產生：多個頁面多個入口

const path = require('path');

module.exports = {
  // 1.JavaScript 執行入口文件( entry是一個函數 )
  entry: () => {
    // 2.好處是這裏面通過for循環可以產生：多個頁面多個入口
    return {
      main:'./src/main.js'
    }
  },
  output: {
    path: path.resolve(__dirname, './dist'),
  }
};

其它文件的內容和上面保持不變，這個打包後和《2.字符串類型Entry》的案例一樣

源碼下載地址

Webpack4 配置 Entry

Webpack4 配置 Entry

1.Entry的類型

2.字符串類型Entry

3.數組類型Entry

4.對象類型Entry

1.對象簡單語法

2.對象標準語法

3.多頁面多入口語法

5.函數類型(動態)的Entry

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

網絡爬蟲的祕密：如何高效地抓取JD.com視頻鏈接

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

Webpack4 配置 Entry

JavaScript中的淺拷貝

Webpack4-的安裝和使用

Webpack4 自定義 Plugins

JavaScript中的深拷貝

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結