0. 创建 js 文件，引入素材中提供的 css 文件。
0. 创建 html 文件，添加需要测试的 html 代码即可。
0. 安装 webpack、webpack-cli，然后创建 webpack.config.js 文件添加相关的配置， 示例：npm install --save-dev webpack webpack-cli
0. 安装 html-webpack-plugin 插件，处理 html 文件，示例： npm install --save-dev html-webpack-plugin
0. 安装 css-loader，让 webpack 可以识别 css 文件。示例： npm install --save-dev css-loader
0. 安装 mini-css-extract-plugin 处理 css 文件。npm install --save-dev mini-css-extract-plugin
文件里目录结构如下
html代码如下
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
<a href="#">百度一下</a>
</body>
</html>
新建index.js，里面引入css文件 import “./style/index.css”
安装 webpack、webpack-cli，然后创建 webpack.config.js 文件添加相关的配置 安装好webpack的时候，在package.json里面的调试下面，要 改成
"scripts": {
"build": "webpack"
},
这样每一次才能在node.js里面npm run build webpack.config.js内容如下：
// 下面用到的插件，这里都要引入，这里会自动引入
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { resolve } = require("path");
module.exports = {
// 入口
entry: "./src/index/js",
// 出口
output: {
path: resolve(__dirname, "dist"),
filename: "bundle.js",
clean: true,
},
// loader 规则
module: {
rules: [
// 需要处理css文件
{
// 找到css文件，忽略大小写
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
// 需要处理html文件
{
test: /\.(png|jpg|jpeg|gif|bmp|webp)$/i,
type: "asset",
// 生成
generator: {
filename: "img/[hash:6][ext]",
},
// 图片转base64编码
parser: {
dataUrlCondition: {
// 低于70的才转base64
maxSize: 70 * 1024,
},
},
},
],
},
// Plugin
// 插件，先安装引入，再来这里配置
plugins: [
// 配置html
new HtmlWebpackPlugin({
// 使用模板
template:"./src/index.html",
filename:"index.html",
// 是否压缩
minify:{
collapseWhitespace:true,/* 清除换行 */
removeComments:true,/* 清除空格 */
},
}),
// 配置css
new MiniCssExtractPlugin({
filename:"./css/index.css"
})
],
// 模式配置,开发者模式
mode: "development",
};
配置完以后，在node.js运行npm run build
