（一）處理 Html 資源
1. 下載下傳包
npm i html-webpack-plugin -D
2. 配置
Ø Webpack.config.js
const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//入口：相對路徑和絕對路徑都行
entry: './src/main.js',
//輸出
output: {
/**
* path：檔案輸出目錄，必須是絕對路徑
* path.resolve方法傳回一個絕對路徑
* __dirname目前檔案的檔案夾絕對路徑
*/
path: path.resolve(__dirname,'dist'),
//檔案輸出的名字 将 js 檔案輸出到 static/js 目錄中
filename: 'static/js/main.js',
// 自動将上次打包目錄資源清空
clean:true,
},
//加載器
module: {
rules: [
......
]
},
//插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查檔案的根目錄
context: path.resolve(__dirname,'src')
}),
new HtmlWebpackPlugin({
// 以 public/index.html 為模闆建立檔案
// 新的html檔案有兩個特點：1. 内容和源檔案一緻 2. 自動引入打包生成的js等資源
template: path.resolve(__dirname,'public/index.html')
})
],
//模式
mode:'development', //開發模式
}; Ø public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html> 編譯後dist 目錄就會輸出一個 index.html 檔案
（二）開發伺服器&自動化
每次寫完代碼都需要手動輸入指令才能編譯代碼，太麻煩了，我們希望一切自動化
1. 下載下傳包
npm i webpack-dev-server -D
2. 配置
Ø webpack.config.js
const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//入口：相對路徑和絕對路徑都行
entry: './src/main.js',
//輸出
output: {
/**
* path：檔案輸出目錄，必須是絕對路徑
* path.resolve方法傳回一個絕對路徑
* __dirname目前檔案的檔案夾絕對路徑
*/
path: path.resolve(__dirname,'dist'),
//檔案輸出的名字 将 js 檔案輸出到 static/js 目錄中
filename: 'static/js/main.js',
// 自動将上次打包目錄資源清空
clean:true,
},
//加載器
module: {
rules: [
......
]
},
//插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查檔案的根目錄
context: path.resolve(__dirname,'src')
}),
new HtmlWebpackPlugin({
// 以 public/index.html 為模闆建立檔案
// 新的html檔案有兩個特點：1. 内容和源檔案一緻 2. 自動引入打包生成的js等資源
template: path.resolve(__dirname,'public/index.html')
})
],
//模式
mode:'development', //開發模式
//開發伺服器
devServer:{
host:'localhost', // 伺服器位址
port: '3000', //端口
open: true, //是否自動開啟浏覽器
}
}; 3. 啟動
npx webpack serve
注意：使用開發伺服器時，所有代碼都會在記憶體中編譯打包，并不會輸出到 dist 目錄下
![CSS樣式抽離之 extract-text-webpack-plugin 插件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)