概念
webpack是一个前端打包工具
用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
Vue 前期脚手架就是用webpack制作
（Vue 开始推荐vite构建工具（更快））
react脚手架
angular等现代框架脚手架都是依赖webpack
webpack核心概念
入口
entry
项目运行的起点
告诉webpack从哪开始打包
出口
output
打包好放入哪
filename 文件名
path 路径
模式
mode
产品模式
production
开发模式
development
loader
加载器
webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力
插件
plugin
webpack运行生命周期过程中做一些其他任务
（压缩，清理）
webpack配置
默认webpack.config.js 配置文件中
devServer
安装：npm i webpack-dev-server -D
作用：开启一个本地服务器
open:true
是否自动打开浏览器
host：“localhost”
域名
port:8080
端口号
hot:true
更新（文件保存，网页自动更新）
package.json
script：{“serve”:"webpack serve"}
npm run serve 运行项目
loader
加载器
css处理
安装：npm i css-loader style-loader -D
作用：css-loader处理.css文件 style-loader把css加载到style标签内
module:{
rule:[{test:/\.css$/,use:["style-loader","css-loader"]}]
}
处理文件
（图片，文件）
安装： npm i file-loader url-loader -D
作用：加载图片和文件
{test:/\.(png|jpg|jpeg|gif|svg)$/,use:[{loader:"file-loader",options:{limit:5000,name:"images/[hash].[ext]"}}]}
处理sass
安装： npm i sass sass-loader -D
处理scss文件
{test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}
plugin
插件
html模板插件
安装:npm i html-webpack-plugin -D
作用
作用：生成html模板文件，自动把打包好的js插入到模板文件
在webpack.config.js 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins:[
new HtmlWebpackPlugin({template:"./public/index.html"})
]
清理dist目录
安装：npm clean-webpack-plugin -D
作用：打包前删除 dist目录
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
plugins:[new CleanWebpackPlugin()]
抽出插件
安装： npm i mini-css-extract-plugin -D
作用：把css抽出为一个单独的文件
导入： const MiniCssExtractPlugin = require("mini-css-extract-plugin")
配置loader
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
实例化插件
new MiniCssExtractPlugin()
优化
css 压缩
安装：npm i css-minimizer-webpack-plugin -D
导入：const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
js的压缩
安装：npm i terser-webpack-plugin -D
导入：const TerserPlugin = require("terser-webpack-plugin");
实现压缩
与优化
optimization: {
minimize: true, //默认是压缩
minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],//压缩器
},
代码分割
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}
特殊标识
[hash] 把内容通过hash算法算出来的一串字符
[hash:7] 取hash字符串前7个
[name] 原文件名称
[ext] 文件的后缀名
目录别名
resolve: {
// 别名：@代表是 src目录
alias: {
'@': path.resolve(__dirname, './src'),
}
},
开发工具
devtool:"eval-cheap-source-map",
作用，错误与源代码有个一一对应关系
link与script
<script defer src=""></script>
等待页面内容加载好再去加载js
<link href= “” rel=prefetch>
提前预加载css
webpack中的魔法注释
魔法注释
import(/* webpackChunkName:"jquery" , webpackPrefetch: true */ "jquery").then(({default:$})=>{
console.log($);
})
/* webpackChunkName:"jquery" */
给当前的js 文件命名
/* webpackPrefetch: true */
网络有空闲预加载js
哈希命名
01 可以控制浏览器的缓存
当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容
02 提供二次加载的速度（有效的控制缓存）
contenthash
内容发生变化 contenthash值才发送变化
chunkhash
入口发生变化，当前的文件chunkhashhash会变化
hash
只要项目内容发送变化，hash就会变化
环境变量
配置：通过环境命令 产品环境 压缩代码，是生产环境不压缩代码，打开devtool
项目开发中 ，产品环境 baseURL http://dida100.com:8888
生产环境 baseURL http://localhost:8080
1.
npm i cross-env -D
2.
package.json 传参
"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",
3. webpack.config.js使用
mode:process.env.NODE_ENV,
devtool:process.env.NODE_ENV==="production"?false:'eval-cheap-source-map',
4. js文件中使用
var baseURL = "";
if(process.env.NODE_ENV=="production"){
baseURL = "http://dida100.com";
}else{
baseURL = "http://localhost"
}
console.log("当前环境：",process.env.NODE_ENV,baseURL);
vue脚手架
不要vue脚手架如何搭建项目？
安装
npm i vue -S
npm i
vue-loader
处理.vue
vue-template-compiler
编译vue目录
vue-hot-reload-api
热更新
vue-style-loader
处理vue 样式
配置
01 导入
const {VueLoaderPlugin} = require("vue-loader")
02 配置
{test:/\.vue$/,use:["vue-loader"]}
03 插件
plugins:[new VueLoaderPlugin()]
js
模板文件 public/main.html
<div id="app"></div>
main.js
import { createApp } from 'vue';
// 导入App.vue
import App from './App.vue';
console.log(App);
// 创建App并挂载
createApp(App).mount("#app")
App.vue
<template >
<div>
<h1>你好Vue3</h1>
</div>
</template >
自由主题