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 進行測試；

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

總結

以上是生活随笔為你收集整理的webpack打包测试_webpack入门笔记(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。