私人博客
许小墨のBlog —— 菜鸡博客直通车
系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!
系列文章目录
项目打包
准备webpack
下载所有依赖的模块:
npm i webpack webpack-cli html-webpack-plugin css-loader html-loader copy-webpack-plugin mini-css-extract-plugin
配置命令 - package.json中:
{
"name": "packproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.1",
"mini-css-extract-plugin": "^2.7.5",
"webpack": "^5.81.0",
"webpack-cli": "^5.0.2"
}
}
创建配置文件 - webpack.config.js
module.exports = {
}
准备项目
将前端项目copy过来
修改:
将index.html中除了index.js之外的js文件中的代码都放在index.js中
同理操作其他页面的js文件
html中引入的内容,都不引入了 - 创建单独的需要打包的js文件
在当前文件夹下新建config文件件,在其中新建了6个js文件:
index.js
cart.js
login.js
my.js
register.js
order.js
每个文件中单独引入html中需要的文件
index.js
import '../page/font/iconfont.css'
import '../page/css/index.css'
import '../page/js/index.js'
将html中的引入都删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>首页</title>
</head>
其他文件同理
开始配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
// 入口
entry: {
index: './config/index.js',
cart: './config/cart.js',
login: './config/login.js',
my: './config/my.js',
order: './config/order.js',
register: './config/register.js',
},
// 配置出口
output: {
path: path.join(__dirname, 'dist'),
clean: true,
assetModuleFilename: 'img/[name][ext]'
},
// 打包模式
mode: 'production',
// map文件
devtool: 'source-map',
// 配置插件
plugins: [
// 配置打包html的插件
new HtmlWebpackPlugin({
template: './page/index.html',
chunks: ['index'],
favicon: './page/favicon.ico',
filename: 'index.html'
}),
new HtmlWebpackPlugin({
template: './page/cart.html',
chunks: ['cart'],
favicon: './page/favicon.ico',
filename: 'cart.html'
}),
new HtmlWebpackPlugin({
template: './page/login.html',
chunks: ['login'],
favicon: './page/favicon.ico',
filename: 'login.html'
}),
new HtmlWebpackPlugin({
template: './page/my.html',
chunks: ['my'],
favicon: './page/favicon.ico',
filename: 'my.html'
}),
new HtmlWebpackPlugin({
template: './page/order.html',
chunks: ['order'],
favicon: './page/favicon.ico',
filename: 'order.html'
}),
new HtmlWebpackPlugin({
template: './page/register.html',
chunks: ['register'],
favicon: './page/favicon.ico',
filename: 'register.html'
}),
// 配置拷贝uploads文件夹插件
new CopyWebpackPlugin({
patterns: [
{
from: './page/uploads/',
to: 'uploads/'
}
]
}),
// 配置css生成文件
new MiniCssExtractPlugin({
// 生成的文件名
filename:'css/[name].css'
})
],
// 解析器
module: {
rules: [
{
test: /\.css/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.jpg$/,
type: 'asset/resource' // webpack自带的静态资源处理
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
}
}
执行打包命令,发现报错了,html写的不规范 - img标签的src不能为空,index.html中找到这个img标签,将src给一个图片链接
<!-- 商品详情 - 默认隐藏 -->
<div class="mask">
<div class="detail">
<img src="./uploads/1678345181467.png" alt="">
<h4>商品名称</h4>
<p>规格</p>
<div class="spec">
<p class="active">小份15个¥16.00</p>
<p>大份20个¥21.00</p>
</div>
<div class="kind">
<p class="active">干饺</p>
<p>汤饺</p>
</div>
<div class="bottom">
<span>总计</span>
<span>¥16.00</span>
<span class="addcart">+加入购物车</span>
</div>
<span class="iconfont icon-guanbi close"></span>
</div>
</div>
继续打包,打包成功
运行打包后的项目
dist中的内容需要运行,跟之前的静态页面一样,需要服务器做静态资源托管,并设置服务器代理。
下载express和http-proxy-middleware
npm i express http-proxy-middleware
搭建服务器:
const express = require('express')
const {createProxyMiddleware} = require('http-proxy-middleware')
const app = express()
app.listen(3001)
app.use(express.static('dist'))
// 配置代理
const proxy = createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true
})
// 处理路由 - 上面静态资源处理不了路由
app.use((req, resp) => {
proxy(req, resp)
})
启动后端接口服务器,再启动当前服务器。
打开浏览器 - 访问静态页面,搞定。
注
本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog