webpack是一个前端打包工具

webpack简介

概念

• 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

哈希命名

1. 可以控制浏览器的缓存
   当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
   当文件名保持不变，浏览器二次请求会从缓存里面去请求内容
2. 提供二次加载的速度（有效的控制缓存）
3. contenthash
   内容发生变化 contenthash值才发送变化
4. chunkhash
   入口发生变化，当前的文件chunkhashhash会变化
5. 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 样式
    -D

配置

1. 导入

const {VueLoaderPlugin}  =  require("vue-loader")

2. 配置

{test:/\.vue$/,use:["vue-loader"]}

3. 插件

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 >