官网网址
https://www.webpackjs.com/concepts/
概念
1.webpack是一个前端打包工具.
2.用它来处理现代前端错综复杂的依赖关系(A插件需要B插件B插件有D插件F插件需要A插件)生成浏览器可以识别静态资源
3. Vue前期脚手架就是用webpack制作(Vue开始推荐vite构建工具(更快) )react脚手架 angular等现代框架脚手架都是依赖webpack
webpack核心概念
入口(entry)
项目运行的起点
告诉webpack从哪开始打包
单个入口(简写)语法
//webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
};
输出(output)
打包好放入哪
filename文件名
path路径
loader
webpack默认只能加载处理js文件,loader让webpack拥有处理其他文件的能力
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
],
},
};
插件(plugin)
webpack运行生命周期过程中做一些其 他任务 (压缩,清理)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};
模式(mode)
//产品模式 production
// webpack.development.config.js
module.exports = {
mode: 'production',
};
//开发模式 development
// webpack.custom.config.js
module.exports = {
mode: 'development',
};
浏览器兼容性(browser compatibility)
环境(environment)
创建
webpack配置
默认webpack.onfig.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 处理.ss文件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]"}]}
plugin插件
html模板插件
安装:npm i html-webpack-plugin -D
作用:生成html模板文件,自动打包好的js插入到模板文件
在webpack.configjs导入 const HtmIWebpackPlugin= require("html-webpack plugin")
plugins:[
new HtmIWebpackPlugin({template:" ./public/index.html"})
]
清理dist目录
安装: npm clean-webpack plugin -D
作用:打包前删除dist目录
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
plugins:[new CleanWebpackPlugin()]
特殊标记
[hash] 把内容通过hash算法算出来的一串字符
[hash:7] 取hash字符串前7个
[name] 原文件名称
[ext] 文件的后缀名
开发工具
devtool:"eval-cheap-source-map"
作用,错误与源代码有个一一对应关系
link与script
<script defer src="> </script>
等待页面内容加载好再去加载js
<link href= "" rel=prefetch>
提前预加载css
webpack中的魔法注释
1.魔法注释
import(/* webpackChunkName:"jquery" , webpackPrefetch:true */ "jquery").then(({defaul:$})=>{
console.log($);
})
/*webpackChunkName:"jquery" */
给当前的js文件命名
/*webpackPrefetch: true */
// 网络有空闲预加载js
哈希命名
01.可以控制浏览器的缓存当文件发生变化时候,hash就变化,文件名也就变化,浏览器就不缓存当文件名保持不变,浏览器二次请求会从缓存里面去请求内容
02.提供二次加载的速度(有效的控制缓存)
03.contenthash
内容发生变化contenthash值才发送变化
04.chunkhash
入口发生变化,当前的文件chunkhashhash会变化
05.hash
只要项目内容发送变化,hash就会变化
环境变量
一、
配置:通过环境命令 产品环境压缩代码,是生产环境不压缩代码,打开devtool
二、
项目开发中,产品环境baseURL http://dida1 00.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脚手架如何创建项目
安装
npm i vue -S
npm i vue-loader -D //处理.vue
vue-template-compiler -D //编译vue目录
vue-hot-reload-api -D //热更新
vue-style-loader -D //处理vue 样式
配置
01导入
const {VueLoaderPlugin} = require("vue-loader")
02配置
{test:/\.vue$/,use:["vue-loader"]}
03插件
plugins:[new VueLoaderPlugin()]
js
1.模板文件 public/main.html
<div id="app"></div>
2.main.js
import {createApp } from 'vue';
//导入App.vue
import App from './App.vue': .
console.log(App);
3.//创建App并挂载
createApp(App).mount("#app")
4.App.vue
<template>
<div>
<h1>你好Vue3</h1>
</div>
</template >