webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

webpack是前端工程構建工具，實現前端工程自動化：自動轉化、自動裝載、自動更新；

打包后的結果：單一入口，得到高度聚合的腳本代碼，且具有壓縮、混淆的特性；

前端主流框架: vue,react,angular ,統一的構建工具;

webpack 是高度可配置的。在開始前你需要先理解四個核心概念：

入口(entry)

入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點(直接和間接)依賴的。

輸出(output)

output 屬性告訴 webpack 在哪里輸出它所創建的 bundles，以及如何命名這些文件，默認值為 ./dist。

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。

列表：https://www.webpackjs.com/loaders/

插件(plugins)

loader 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。

插件列表：https://www.webpackjs.com/plugins/

全局安裝(一定要安裝，不然無法使用webpack命令)：

npm install -g webpack webpack-cli

本地安裝：

npm install webpack webpack-cli --save-dev

注意：這里的--save-dev 不是注釋的意思，而是將安裝記錄寫入開發環境；

一、命令行打包：

webpack ./src/app.js -o ./dist --mode=development

-o 是out輸出命令 ， --mode 打包模式 ，development 開發模式 \ ?production 生產模式

webpack ./src/app.js -o ./dist_pro --mode=production

二、使用 webpack 配置文件打包

1. 創建webpack.config.js 文件

module.exports = {    //入口文件    entry:"./src/app.js",    //出口配置    output:{        //輸出文件名稱        filename:"bundle.js",        //輸出路徑，要絕對路徑        path:path.resolve(__dirname,'dist'),    },    //開發模式(development)， 生產模式(production)    mode:'development'}

2. 在命令行中輸入命令webpack回車；

3. index.html引入js腳本bundle.js;

三、loader 加載模塊

1. 編輯webpack.config.js 文件，加入loader加載模塊配置 module

const path = require('path',__dirname);console.log("路徑",__dirname);module.exports = {    //入口文件    entry:"./src/app.js",    //出口配置    output:{        //輸出文件名稱        filename:"bundle.js",        //輸出路徑，要絕對路徑        path:path.resolve(__dirname,'dist'),    },    //開發模式(development)， 生產模式(production)    mode:'development',    //loader 的配置    module:{        // 對某個格式的文件進行轉換處理規則        rules:[            {                test:/\.css$/,                use:[                    // use 數組里面的loader順序，從下到上，逆序執行                    //將js樣式內容插入到style標簽例里                    "style-loader",                    //將文件轉換為js                    "css-loader"                ]            }        ],    }}

2. 創建style.css并加入到app.js中

3. index.html引入js腳本bundle.js;

loader 加載模塊

1. 編輯webpack.config.js 文件，加入loader加載模塊配置 module

const path = require('path',__dirname);console.log("路徑",__dirname);module.exports = {    //入口文件    entry:"./src/app.js",    //出口配置    output:{        //輸出文件名稱        filename:"bundle.js",        //輸出路徑，要絕對路徑        path:path.resolve(__dirname,'dist'),    },    //開發模式(development)， 生產模式(production)    mode:'development',    //loader 的配置    module:{        // 對某個格式的文件進行轉換處理規則        rules:[            {                test:/\.css$/,                use:[                    // use 數組里面的loader順序，從下到上，逆序執行                    //將js樣式內容插入到style標簽例里                    "style-loader",                    //將文件轉換為js                    "css-loader"                ]            }        ],    }}

2. 創建style.css并加入到app.js中

var data = require("./data.json");require("./style.css");  // 將創建的style.css引入到app.js中function hello(){    alert("hello webpack!!!");}hello();console.log("關聯的數據:",data);

3. 在命令行中輸入命令webpack回車，打包完成后，打開index.html 進行測試；

部分素材來源網絡，如有侵權請聯系刪除