概述
本質(zhì)上，webpack 是一個用于現(xiàn)代 JavaScript 應(yīng)用程序的 靜態(tài)模塊打包工具。當 webpack 處理應(yīng)用程序時拆宛，它會在內(nèi)部從一個或多個入口點構(gòu)建一個 依賴圖(dependency graph)确封，然后將你項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態(tài)資源鹉动，用于展示你的內(nèi)容轧坎。
前置配置
mkdir webpack-demo
cd webpack-demo
npm init -y // create package.json
npm i --save-dev webpack webpack-cli // install webpack and webpack-cli to devDependencies
copy nul webpack-config.js // create webpack-config.js file
mkdir src // create js source folder
mkdir img // create image source folder
mkdir css // create css source folder
常用配置
入口文件
project
│ index.html
│ package-lock.json
│ package.json
│ webpack.config.js
├─css
├─img
└─src
index.js
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1"
}
}
webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
index.js
console.log('hello kitty.')
document.write('hello kitty.')
在cmd中執(zhí)行 webpack命令，發(fā)現(xiàn)目錄結(jié)構(gòu)下會生成 dist目錄和bundle.js文件泽示。然后打開index.html缸血，可以看到界面和控制臺可以正常顯示 hello kitty.蜜氨。
至此，webpack的第一步配置已經(jīng)完成捎泻。
CSS樣式資源
為了在javaScript文件中importcss樣式文件飒炎，需要安裝引入style-loader和css-loader。
npm i --save-dev style-loader css-loader
在webpack.config.js文件中配置css的引入規(guī)則笆豁，定義查找的文件后綴和需要使用到的plugin郎汪。
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader','css-loader'],
}
]
}
在css目錄下定義樣式文件 style.css
body {
background: greenyellow;
}
在 index.js文件中引入 style.css樣式
import '../css/style.css'
執(zhí)行webpack命令，觀察index.html界面的背景顏色是否發(fā)生變化渔呵。
圖片資源
圖片資源的引入與樣式引入類似怒竿，但是webpack中內(nèi)置了 Asset Modules，不需要再引入三方的plugin扩氢。
在webpack.config.js文件中配置圖片資源的引入規(guī)則
module: {
rules: [
{
... css config
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
]
}
在img目錄下引入一張圖片icon.png
.......
└─img
icon.png
在 index.js文件中創(chuàng)建一個圖片控件并顯示耕驰。
import Img from '../img/icon.png'
const myImg = new Image();
myImg.src = Img;
document.body.appendChild(myImg)
執(zhí)行webpack命令，觀察index.html界面是否有顯示這張圖片录豺。
其它資源的引入和使用同 上面的
css樣式和圖片資源朦肘，如靜態(tài)數(shù)據(jù)、字體等等双饥。
使用 source map
當webpack打包源碼時媒抠，可能會很難追蹤到error和warning在源代碼中的原始位置。為了更容易的追蹤error和warning咏花， javaScript提供了source maps功能趴生，可以將編譯后的代碼映射回原始的源代碼中。
webpack.config.js的具體配置
module.exports = {
.......
devtools: 'inline-source-map',
}
具體錯誤信息可以在Console控制臺中查看昏翰。
HtmlWebpackPlugin
到目前為止苍匆，我們都是在 index.html 文件中手動引入所有資源，然而隨著應(yīng)用程序增長棚菊，并且一旦開始 在文件名中使用 hash 并輸出 多個 bundle浸踩，如果繼續(xù)手動管理 index.html 文件，就會變得困難起來统求。然而检碗，通過一些插件可以使這個過程更容易管控。
安裝html-webpack-plugin插件
npm i --save-dev html-webpack-plugin
調(diào)整webpack.config.js文件中的相關(guān)配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
......
plugins:[
new HtmlWebpackPlugin({
title: 'New Page',
})
],
}
執(zhí)行webpack命令码邻，查看效果折剃。
webpack-dev-server
當前的配置，在編寫完代碼后都需要手動執(zhí)行webpack命令進行編譯像屋，然后手動刷新瀏覽器查看效果微驶。
webpack-dev-server 可以做到自動編譯代碼、自動刷新瀏覽器的效果。
安裝webpack-dev-server插件
npm i --save-dev webpack-dev-server
修改webpack.config.js配置文件 因苹，告訴devServer苟耻，該從什么位置查找文件
module.exports = {
.......
devServer:{
static: './dist',
hot: true, //自動更新
},
}
在package.json腳本上添加直接運行 dev server的script
"scripts": {
"build-dev": "webpack serve --open"
},
運行命令并自動打開瀏覽器頁面
npm run build-dev
其它
待補充。扶檐。凶杖。。款筑。智蝠。
