为什么要使用webpack
- 浏览器不支持less sass语法(缺乏样式编译功能)
- 不支持es6/es7(缺乏babel编译功能,把es6转成es5)
- 开发的时候要是我们修改一下代码保存之后浏览器就自动更新就好了(缺乏热更新功能)
- 本地请求远程接口会产生跨域问题(缺乏请求代理功能)
- 项目要上线了,要是能一键压缩代码啊图片什么的就好了(缺乏自动压缩打包功能)
webpack的核心概念
webpack
- 入口entry
项目运行的起点告诉webpack从哪开始打包 - 出口output
打包好放入哪
filename 文件名
path 路径 - 模式mode
产品模式
production
开发模式
development - loader加载器
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。 - 插件plugin
webpack运行生命周期过程中做一些其他任务
(压缩,清理)
使用
- 创建项目
- npm init 初始化项目
- npm i webpack webpack-cli -D //写入到package.json的开发依赖中
- npx webpack 打包
配置
- 基本配置
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js',
},
};
loader
css处理
- npm i css-loader style-loader -D
- 在 webpack.config.js 文件中指定 loader。
module:{
rules:[
{test:/\.css$/,
use:["style-loader","css-loader"]}
]
}
图片处理
- npm i file-loader url-loader -D
- 在 webpack.config.js 文件中指定 loader
{test:/\.(png|jpg|jpeg|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.confing.js导入
清理dist目录
- 安装npm i clean-webpack-plugin -D
- 作用:打包前删除dist目录
抽出插件
安装: 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()
devServe
- 安装 npm i webpack-dev-serve -D
- 作用:开启一个本地服务器
- webpack.config.js
- package.json
优化
- 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=“”>
等待页面内容加载好再去加载js - < link href= “” rel=prefetch>
提前预加载css
webpack中的魔法注释
- 魔法注释
import(/* webpackChunkName:“jquery” , webpackPrefetch: true */ “jquery”).then(({default:KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲)=>{ console…);
}) - /* 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”, -
- webpack.config.js使用
mode:process.env.NODE_ENV,
devtool:process.env.NODE_ENV===“production”?false:‘eval-cheap-source-map’,
- webpack.config.js使用
-
- js文件中使用
var baseURL = “”;
if(process.env.NODE_ENV==“production”){
baseURL = “http://dida100.com”;
}else{
baseURL = “http://localhost”
}
console.log(“当前环境:”,process.env.NODE_ENV,baseURL);
- js文件中使用
vue脚手架
- 不要vue脚手架如何搭建项目?
- 安装
npm i vue -S
npm i- vue-loader
处理.vue - vue-template-compiler
编译vue目录 - vue-hot-reload-api
热更新 - vue-style-loader
处理vue 样式
- vue-loader
- 配置
- 01 导入
const {VueLoaderPlugin} = require(“vue-loader”) - 02 配置
{test:/.vue$/,use:[“vue-loader”]} - 03 插件
plugins:[new VueLoaderPlugin()]
- 01 导入
- js
- 模板文件 public/main.html
< div id=“app”> - 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
< /div>
< /template >
- 模板文件 public/main.html