關于webPack

簡單來說，webpack就是一個打包工具，可以將相互依賴的html，css，js以及圖片字體等資源文件，經過處理打包成一個可執行的項目文件。

webPack配置的幾個概念

entry（入口）

配置entry是告訴 webpack 從哪個文件開始打包，構建內部的依賴關系圖。當確定了入口起點后，webpack 將從這個文件出發，追蹤并識別出所有它直接或間接依賴的模塊和庫。這樣，webpack 就能知道整個項目中哪些資源是必需的，并將它們組織起來。
默認值是 ./src/index.js，但我們可以通過在 webpack.config.js 中配置 entry 屬性，來指定一個（或多個）不同的入口起點。

output（輸出）

配置output是告訴webpack打包后的文件以什么文件名存在什么路徑下面。默認情況下，主輸出文件會被放置在 ./dist/main.js 路徑下，而其他的生成文件則會被存放在 ./dist 目錄中。

loader（輸出）

默認的webpack只能處理js和json文件，為了拓展處理CSS、圖片或字體文件等其他文件的能力，則需要借助loader。

plugin（插件）

插件可以用于執行范圍更廣的任務。包括：打包優化，資源管理，注入環境變量等。

mode（模式）

通過設置 mode 參數為 development、production 或 none，你可以啟用 webpack 在不同環境下的內置優化。mode 參數的默認值是 production。
development：適用于開發環境，啟用快速編譯和友好錯誤提示等功能，但不會進行代碼壓縮等生產環境優化。

production：適用于生產環境，默認啟用代碼壓縮、樹搖（去除未使用的代碼）等優化措施，以減小打包后的文件體積。

none：不啟用任何優化，適用于需要完全控制構建過程的情況。

基本使用過程示例

本示例沒有配置loader和plugin，以開發過程中的js文件為例，演示webpack最基本的使用方法。

1.創建測試目錄和代碼

在根目錄下，創建文件下 src文件夾，用于放開發過程中的源代碼，并在src文件夾下新建html文件和js文件。

js文件中寫一個簡單的打印代碼

html中進行引用js

檢驗下是否生效

可以看到正常打印出了js中的日志。

2. 將index.js通過webpack進行打包

第1步所示的index.js是我們的源代碼，現在我們看看如何使用webpack對index.js進行打包。
1）在根目錄打開終端，輸入指令npm init -y 初始化項目環境

初始化后，根目錄下會多一個package.json文件
2）執行npm add webpack webpack-cli --dev將webpack安裝到開發環境；此時，文件結構如下：

3）在根目錄下手動新建一個webpack.config.js文件，用于配置webpack的參數（前文所提到的entry、output等），該文件配置如下：

const path = require('path');module.exports = {// 模式：開發模式（不壓縮代碼）mode: 'development',// 入口文件entry: './src/index.js',// 輸出配置output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},// 添加 watch 選項實現自動打包watch: true, // 關鍵配置：監聽文件變化
};

上面的配置內容包括三部分：我們的入口文件路徑、輸出文件的路徑和自動打包的配置（如果此項不配置的話，后續開發過程中修改index.js后需要手動輸入命令行去打包以更新輸出結果）。
4）安裝npm add --dev webpack-dev-server，使自動打包配置生效。
5）輸入打包命令：npx webpack

可以看到根據我們配置的output信息，新建了dist文件夾和下面的bundle.js文件，bundle.js文件就是我們打包后的文件，其包含了源文件index.js的信息。
6）驗證打包后文件是否生效
修改html中的引用信息，直接引用bundle。

運行后，發現原來index.js里面打印日志的功能仍然可以正常輸出，說明打包后的文件可以代替源文件進行工作了。
7）檢驗自動打包是否生效
保持html文件內容不動，直接修改index.js源文件的內容，刷新瀏覽器，發現日志輸入結果變化了，說明我們在修改源文件的同時，webpack已經檢測到變化并幫我們更新了打包文件。