webpack官網概念:
本質上，webpack 是一個用于現代 JavaScript 應用程式的 靜態模塊打包工具，當 webpack 處理應用程式時，它會在內部從一個或多個入口點構建一個 依賴圖(dependency graph)，然后將你專案中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態資源，用于展示你的內容，
開始：
首先確保安裝了node.js
1.初始化、安裝
創建一個檔案夾，在檔案夾地址欄輸入 cmd
如圖：
進入命令頁：
//初始化
npm init -y
//安裝
npm i webpack webpack-cli -D2.組態檔
打開開發工具：
在檔案根目錄創建 webpack.config.js
webpack核心概念：
entry：入口
output：出口
plugin：插件
loader：加載器
mode：模式
devServer：本地服務器
開始配置：
創建一個src目錄 在src下 創建 index.js 作為入口檔案 在創建一個實驗檔案，測驗是否打包成功，
# index.js
import elem from "./first.js";
document.body.appendChild(elem);
# first.js
let elem = document.createElement("div");
elem.innerHTML = "你好webpack5.0"
export default elem;在 webpack.config.js中配置
module.exports = {
// webpack 概念入口，輸出，插件，loader
entry: "./src/index.js", //定義入口檔案
// 模式 產品，開發
mode: "production", //'可選：開發環境 development
// 輸出
output: {
// 路徑，__dirname 當前目錄
path: __dirname + "/dist",
// 定義檔案名
filename: 'main.js',
},
// 優化選項
optimization: {
},
// 模塊
module: {
},
plugins: [
// 在webpack的運行程序中(運行程序（生命周期))做一些額外操作處理模板，清理
],
// 本地服務器配置
// npm i webpack-dev-server -D
// 安裝本地服務
devServer: {
open: true, //自動打開瀏覽器
hot: true, //熱更新
host: "localhost", //本地域名
port: 8080, //埠號
}
}注意安裝：本地服務：npm i webpack-dev-server -D
使用 npx webpack 命令打包
打包完成后會根據定義的出口輸出至定義的檔案夾下，生成定義檔案名
打開后：
webpack將兩個檔案合并成功，打包成功
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/397382.html
標籤：其他
上一篇：簡單運用理解webpack