概念
- webpack是一个前端打包工具
- 用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
- Vue 前期脚手架就是用webpack制作（Vue 开始推荐vite构建工具（更快））
- react脚手架、angular等现代框架脚手架都是依赖webpack
安装webpack
基础使用
在项目中配置webpack
- 在项目根录中，创建名为webpack.config.js 的webpack配置文件，并初始化如下的基本配置
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: "main.js", //文件名
path: __dirname + '/dist', //文件夹 dirname当前归录
},
mode: "production", // // 模式 development开发模式 production 产品模式
- 在package.json的script节点下，新增serve脚本如下：
"scripts": {
"serve": "webpack",
},
- mode 节点 的可选值有两个，分别是：
① development- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包 速度快 ，适合在 开发阶段使用
② production - 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包 速度很慢 ，仅适合在项目 发布阶段 发布阶段 使用
- webpack中的默认约定
默认的打包入口文件src ->index.js
默认的输出文件路径dist->main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
自定义打包的入口和出口
在 webpack.config.js配置文件中，通过entry节点指定打包的入口 。通过output 节点指定打包的出口 。
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: "main.js", //文件名
path: __dirname + '/dist', //文件夹 dirname当前归录
},
webpack的插件
- html-webpack-plugin
① webpack中的 HTML 插件（类似于一个模板引擎）
② 可以通过此插件自定制 index.html页面的内容
③ webpack-dev-server 可以让 webpack 监听项目源代码的变化 ，从而进行自动打包构建 。
//导入htmL-webpack-plugin插件处理htmL目标
//提前安装 npm i htmL-webpack-plugin -D
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: "main.js", //文件名
path: __dirname + '/dist', //文件夹 dirname当前归录
},
mode: "production", // // 模式 development开发模式 production 产品模式
plugins: [
//实例化插件，指定tempLate模板的位置
new HtmlWebpackPlugin({
template: './public/index.html'
}),
],
}
- 安装 webpack-dev-server
配置 webpack-dev-server
① 修改 package.json -> scripts 中的 serve 命令如下：
"scripts": {
"build": "webpack",
"serve": "webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
//需要提前安装npm i webpack-dev-server -D
devServer: {
port: 8080,
hot: true,//更新
host: "localhost",//域名
open: true,//默认自动打开浏览器
proxy: {} //vue.config.js代理一致
}
webpack 中的 loader
- 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
- loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：
- css-loader 可以打包处理 .css 相关的文件
- less-loader 可以打包处理 .less 相关的文件
- babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
打包处理 css 文件
① 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
//使用loader
//npm i css-loader style-loader -D
// css-loader处理css文件，style-loader把加载好的css放入style标签
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: "main.js", //文件名
path: __dirname + '/dist', //文件夹 dirname当前归录
},
mode: "production", // // 模式 development开发模式 production 产品模式
plugins: [
//实例化插件，指定tempLate模板的位置
new HtmlWebpackPlugin({
template: './public/index.html'
}),
],
module: {
rules: [
//当文件名test通过，使用如下插件
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
]
},
}
- 其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是：从后往前调用
打包处理样式表中与 url 路径(图片)相关的文件
① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
const HtmlWebpackPlugin = require("html-webpack-plugin")
//自定拷贝到dist目录,插入打包好的js文件
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: "main.js", //文件名
path: __dirname + '/dist', //文件夹 dirname当前归录
},
mode: "production", // // 模式 development开发模式 production 产品模式
plugins: [
//实例化插件，指定tempLate模板的位置
new HtmlWebpackPlugin({
template: './public/index.html'
}),
],
module: {
rules: [
// 需要提前安装url-loader file-loader
{test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use:[{
loader:"url-loader", //使用url加载器
options:{limit:5000,name:'images/[hash].[ext]'},
//选项，当图片小于5000字节时候，转换base64（小图片减少一次http请求）
//文件命名images文件夹,hash值（计算出图片的名称)ext后缀名
}]
},
]
},
}
注意：
limit 用来指定图片的大小，单位是字节（byte）
只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片
自动清理 dist 目录下的旧文件
为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：
现在项目终端中运行如下命令
npm i clean-webpack-plugin -D
- 配置clean-webpack-plugi
//导入htmL-webpack-plugin插件处理htmL目标
//提前安装 npm i htmL-webpack-plugin -D
//npm i clean-webpack-plugin -D
//作用:清零dist目录(执行npm run build需要清理上一次的生成的内容)
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
//自定拷贝到dist目录,插入打包好的js文件
//使用loader
//npm i css-loader style-loader -D
// css-loader处理css文件，style-loader把加载好的css放入style标签
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: "main.js", //文件名
path: __dirname + '/dist', //文件夹 dirname当前归录
},
mode: "production", // // 模式 development开发模式 production 产品模式
plugins: [
//实例化插件，指定tempLate模板的位置
new HtmlWebpackPlugin({
template: './public/index.html'
}),
//实例化清理
new CleanWebpackPlugin()
],
module: {
rules: [
//当文件名test通过，使用如下插件
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
// 需要提前安装url-loader file-loader
{test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use:[{
loader:"url-loader", //使用url加载器
options:{limit:5000,name:'images/[hash].[ext]'},
//选项，当图片小于5000字节时候，转换base64（小图片减少一次http请求）
//文件命名images文件夹,hash值（计算出图片的名称)ext后缀名
}]
},
]
},
//需要提前安装npm i webpack-dev-server -D
devServer: {
port: 8080,
hot: true,//更新
host: "localhost",//域名
open: true,//默认自动打开浏览器
proxy: {} //vue.config.js代理一致
}
}
// module 模块 exports 导出 entry output 输出 filename 文件名 path 路径 dirname 当前目录 dist 目标
// module 模式 deveLopment 开发模式 production 产品
//dev开发Server服务器prot端口号hot热更新 host域名 open打开 proxy代理
配置 webpack 的打包发布
- 在 package.json 文件的 scripts 节点下，新增 build 命令如下：
"scripts": {
"build": "webpack",
"serve": "webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
![[UE][UE5]Gameplay框架,Actor,pawn,playerController(玩家控制器),Character(角色)之间的关系](https://img-blog.csdnimg.cn/6405a1eb7c2a4ccd898417160de69615.png)
![[附源码]计算机毕业设计JAVA家政管理系统](https://img-blog.csdnimg.cn/c57c42d15c7f40c2b85717168a75a3bd.png)
