什么是webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
全局安装webpack
npm install -g webpack webpack-cli
webpack的核心概念
- 入口entry
项目运行的起点
告诉webpack从哪开始打包 - 出口output
打包好放入哪
filename文件名
path路径 - 模式mode
产品模式production
开发模式development - loader加载器
webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力 - 插件plugin
webpack运行生命周期过程中做一些其他任务
(压缩，清理)
devServer
安装指令 npm i webpack-dev-serve -D
作用开启一个本地服务器
pen：true 是否打开浏览器
host：“loaclhost” 域名
port：8080 端口号
hot：true 更新（文件保存，网页自动更新）
package.json
devServer: {
port: 8080,
hot: true,
host: "loaclhost",
open: true,
proxy: {
},
},
需要在package.jsonzhong添加
"scripts": {
"serve": "webpack serve",
}
loader加载器
css处理
作用 css-loader处理css文件 style-loader吧css加载到style标签内
安装指令 npm i css-loader style-loader -D
module: {
rules: [
// 当前文件名test通过，使用如下插件
{
test: /\.css$/, use: ["style-loader", "css-loader"] },
],
},
文件处理
安装指令 npm i file-loader url-loader -D
作用 加载图片和文件
{
test: /\.(png|jpg|webp|ico|gif|bmp)$/,
use: [
{
loader: "url-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: [
// 实例化插件 指定tempplate模板的位置
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
清理dist目录
安装 npm i 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
//魔法注释
import(/* webpackChunkName:"jquery" , webpackPrefetch: true */ "jquery").then(({
default:$})=>{
console.log($);
})
/* webpackChunkName:"jquery" */
给当前的js 文件命名
/* webpackPrefetch: true */
网络有空闲预加载js
哈希命名
- 可以控制浏览器的缓存当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容 - 提供二次加载的速度（有效的控制缓存）
内容发生变化 contenthash值才发送变化 - chunkhash 入口发生变化，当前的文件chunkhashhash会变化
hash 只要项目内容发送变化，hash就会变化
环境变量
配置：通过环境命令 产品环境 压缩代码，是生产环境不压缩代码，打开devtool
项目开发中 ，产品环境 baseURL http://dida100.com:8888
生产环境 baseURL http://localhost:8080
- npm i cross-env -D
- package.json 传参
"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",
- webpack.config.js使用
mode:process.env.NODE_ENV,
devtool:process.env.NODE_ENV===“production”?false:‘eval-cheap-source-map’, - 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
//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 >