一、webpack了解
什么是Webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
模块化,让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
Scss,less等CSS预处理器…
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。
webpack打包原理
把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。
webpack的优势
(1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
(2)能被模块化的不仅仅是 JS 了。
(3) 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
(4)扩展性强,插件机制完善
官方文档:
二. webpack打包工具的安装
webpack打包工具依赖nodejs. nodejs环境依赖各种包, 这些包使用npm进行管理 npm就是用来管理node下的各种包的
第一步: 安装nodejs
在官网下载nodejs:https://nodejs.org/zh-cn/ 安装好以后可以查看nodejs的版本
node -v
第二步: 安装webpack
首先查看本机是否已经安装了webpack, 使用命令查询
webpack --version
如果没有安装, 则安装全局的webpack
npm i webpack webpack-cli -D
三. webpack的基本使用
Loader的使用
npm i class-loader style-loader -D
css-loader处理.css文件style-loader把css加载到style标签内
module.exports = {
module: {
rules: [
// 当文件名test通过,使用如下插件
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
]
},
}
处理图片
安装 npm i file-loader url-loader -D
作用 加载图片和文件
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use: [{
loader: "url-loader", // 使用url加载器
options: { limit: 5000, name: 'images/[hash].[ext]' },
// 文件命名 images文件夹,hash值(计算出图片的名称) ext后缀名
}]
}
]
},
}
plugin插件
Plugin 的配置很简单,plugins
配置项接受一个数组,数组里每一项都是一个要使用的 Plugin 的实例,Plugin 需要的参数通过构造函数传入。
安装:npm i html-webpack-plugin -D
作用:生成html模板文件,自动把打包好的js插入到模板文件
在webpack.config.js 导入
const HtmlwebpackPlugin = require(“html-webpack-plugin”)
plugins:[
new HtmlwebpackPlugin({template:"./public/index.html"})
]
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
配置
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 >