（一）处理 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=)