webpack介绍
webpack概念:
- webpack是一个前端打包工具
- 用它来处理现代前端错综复杂的依赖关系(A插件需要B插件B插件有D插件 F插件需要A插件)生成浏览器可以识别静态资源
- Vue前期 脚手架就是用 webpack制作(Vue开始推荐用vite构建工具(更快))、react脚手架、angular等现代框架脚手架都是依赖webpack
- 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。
webpack主要功能
它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
webpack核心概念:
1. 入口 entry
入口起点(entry point)
项目运行的起点
告诉webpack从哪开始打包
2. 出口 output
output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件
3. 模式 mode(3种)
development
(开发环境)
- 不会对打包生成的文件进行代码压缩和性能优化、打包速度快,
- 适合在开发阶段使用
production
(生产环境) 默认模式
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢,仅适合在项目发布阶段使用
none
//入口、出口、模式
const path = require('path');
module.exports = {
// 入口
// entry:'./src/index.js',
entry:{
"vue":"./src/main.js",
"base":"./src/index.js"
},
// 输出
output:{
// 路径,__dirname 当前目录
path:__dirname+"/dist",
// 文件名称
filename:'[name]-[hash:7].js'
},
mode: 'production',//mode模式:produce产品开发模式
};
4. 加载器 loader
webpack默认只能加载处理js文件
loaderi让webpack拥有处理其他文件的能力
5.插件 plugin
webpack运行生命周期过程中做一些其他任务(压缩,清理)
webpack配置:
默认webpack.configjs配置文件中
特殊标识:
[hash]把内容通过hash算法算出来的一串字符
[hash:7]取hash字符串前7个
[name]原文件名称
[ext]文件的后缀名
代码分隔:
代码分隔官网
在webpack.config.js配置文件中 配置代码分隔
//webpack.config.js文件中
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}
设置目录别名
在webpack.config.js
配置文件中 设置
resolve: {
//别名: @代表是src目录resolve: {
//别名: @代表是src目录
alias: {
//将@ 设置为src的别名
'@': path.resolve(__dirname, './src'),
}
},
开发工具
开发工具官方文档参考
作用:错误与源代码有个一一对应关系
在webpack.config.js
配置文件中 配置开发工具
devtool:"eval-cheap-source-map",
link与script
<script defer src=""></script>
等待页面内容加载好再去加载js<link href="" rel=prefetch>
提前预加载css
按需导入js(结合webpack魔法注释)
1. 安装jQuery
npm i jquery -S
2. 在src/index.js 导入
2.1 直接导入js
import $ from 'jquery'
console.log($)
2.2 按需导入js(结合webpack魔法注释)
//魔法注释
//01 给当前的js 文件命名
/* webpackChunkName:"jquery" */
//02 网络有空闲预加载js
/* webpackPrefetch: true */
big.onclick = function() {
import( /* webpackChunkName:"jquery" , webpackPrefetch: true */ "jquery").then(({
default: $
}) => {
console.log($);
})
}
webpack 多入口/多出口 操作(在webpack/config.js)
案例:index/main双入口/出口
//入口
entry: {
"index": '@/index.js',
"main": '@/main.js',
},
//出口
plugins: [
// 实例化插件,指定template模板的位置
new HtmlWebpackPlugin({
template:'./public/index.html',//模板
chunks:["index"],//入口
filename:"index.html" //文件名
}),
new HtmlWebpackPlugin({
template:'./public/main.html',//模板
chunks:["main"],//入口
filename:"main.html" //文件名
}),
]
哈希命名
contenthash
chunkshash
hash
作用:
01 可以控制浏览器的缓存
当文件发生变化时候,hash就变化,文件名也就变化,浏览器就不缓存
当文件名保持不变,浏览器二次请求会从缓存里面去请求内容
02 提高二次加载的速度(有效的控制缓存)
contenthash
内容发生变化contenthash值才发生变化chunkshash
入口发生变化,当前的文件chunkhashhash会变化hash
只要项目内容发送变化,hash就会变化
环境变量
配置:通过环境命令产品环境压缩代码,使生产环境不压缩代码,打开devtool
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脚手架
1. 安装
npm i vue -S
npm i vue-loader -D (处理.vue)
npm i vue-template-compiler -D (编译vue目录)
npm i vue-hot-reload-api -D (热更新)
npm i vue-style-loader -D (处理vue 样式)
2.在webpack.config.js 导入/配置/使用
//导入
const {VueLoaderPlugin} = require("vue-loader")
//配置
{test:/\.vue$/,use:["vue-loader"]}
//使用
plugins:[new VueLoaderPlugin()]
3. 在js 使用
main.js
//在main.js
//创建
import { createApp } from 'vue';
// 导入App.vue
import App from './App.vue';
console.log(App);
// 创建App并挂载
createApp(App).mount("#app")
main.html
<div id="app"></div>
App.vue
<template >
<div>
<h1>你好Vue3</h1>
</div>
</template >
如下图
实现的页面效果
接下来是操作如何使用webpack’的
使用webpack操作
1.安装
1.1 创建项目/初始化项目/安装webpack脚手架
2. 运行webpack
2.1 创建dist/index.html文件 且 引入main.js(必须在body中引入)
2.2新建src/header.js || index.js
2.3 在scr/header.js 创建div标签且插入标签内容
2.4 在src/index.js 导入header.js 且追加到body中
2.5 在cmd到pack根目录 npx webpack
就会此时dist文件夹出现mian.js
2.6 在浏览器运行即可
3.配置webpack.config.js
3.1在webpack.config.js定义入口/输出/开发模式
4. 安装plugin插件
4.1 html模板插件
html模板插件作用:生成htmI模板文件,自动把打包好的js插入到模板文件
4.1.1 安装 :
npm i html-webpack-plugin -D
4.1.2 创建public/index/js 文件
4.1.3 在webpack.config.js导入 且配置
//const导入
const HtmIWebpackPlugin = require("html-webpack-plugin'")
plugins: [
// 实例化插件 指定template模板的位置
new HtmlWebpackPlugin({
template:'./public/index.html' //自行创建
})
],
4.2 自动清理dist目录插件
作用:打包前删除dist目录
4.2.1 安装
npm i clean-webpack-plugin -D
4.2.2 webpack.config 导入 且配置
//导入
const { CleanWebpackPlugin} = require('clean-webpack-plugin')
//配置
plugins: [new CleanWebpackPlugin()]
4.3 css/js 优化插件
4.3.1 css优化
css优化官网参考
如下操作
4.3.1.1 安装
//安装插件
npm i css-minimizer-webpack-plugin -D
4.3.1.2 配置中导入/使用
//在webpack.config.js配置文件中
//01导入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//02使用
optimization: {
minimizer: [new CssMinimizerPlugin()],
},
4.3.2 js优化插件
js插件官网
操作如下
4.3.2.1安装
//安装js压缩插件
npm i terser-webpack-plugin -D
4.3.2.2 配置中导入/使用
//webpack.config.js文件中
//01 导入:
const TerserPlugin = require("terser-webpack-plugin");
//02 使用
optimization: {
minimize: true, //默认是压缩
minimizer: [new TerserPlugin()],//压缩器
},
最终实现css/js 压缩与优化
5. loader 加载器
5.1 css-loader处理
作用:css-loader.处理.CSS文件style-loader把css加载到style标签内
5.1.1 安装
//安装样式
npm i css-loader style-loader -D
5.1.2 在src/创建assets/index.css (进行编辑)
5.1.3 在src/index.js导入css
5.1.4 在webpack.config.js 配置样式
//配置
module: {
rules: [{
test: /\.css$/,
// 当文件test通过,使用如下插件
use: ["style-loader", "css-loader"]
}]
},
5.2 处理文件(图片、文件)
作用:加载图片和文件
5.2.1 安装
//安装
npm i file-loader url-loader -D
5.2.2 在webpack.config.js配置
{
test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use: [{
loader: "url-loader",
options: {limit: 5000,name: 'images/[hash].[ext]'},
}]
}
5.2.3 在src/index.js页面中导入且设置图片
页面效果
6. devserver 本地服务器开启
6.1安装
//安装本地服务器
npm i webpack-dev-server -D
6.2 webpack.config.js 配置 定义服务器内容
end…