webpack+vite前端构建工具 - 9 webpack技巧性配置

9 webpack技巧性配置

9.1 hash值的意义

9.1.1 hash控制

  1. 问题:浏览器加载资源后会缓存资源,但是如果名字改了呢?
    回答:名字改了就不会缓存他了,会启动新的资源。

【项目发版】

  • 现象:a.css,当项目的css更新了,但浏览器会取用缓存的a.css文件,因此用户看到的还是旧的css文件

  • 解决:给打包文件加hash值。内容改变,hash改变。

  • 现象:加上hash后,如果css内容没有变化,那么继续用之前的css文件。一旦更新,重新打包发布,此时的css文件名称与之前浏览器缓存的css名称不同,浏览器会请求新的css文件,而不是使用老的缓存文件。

  • 注意:一旦任何内容有更改,本次打包的hash就会变化。(同理,只要打包的内容没有变化,hash就不会变)

9.1.2 hash精确控制

【优化】

  • 迎来新的问题
    • 比如紧急发布了css文件,那hash全变了,所有的资源都要更新一遍。
    • 但其实只有一个css文件需要更新,其他的文件不需要更新,可以直接使用原有的浏览器缓存资源。
  • 想做到hash精确控制------chunkhash
    • 只对变化的文件才会刷新hash,否则不会刷新hash
javascript 复制代码
// webpack.config.js
...
    output: {
        path: __dirname + '/dist', // 绝对路径,__dirname是node的全局变量,表示当前目录的绝对路径
        filename: "[name].[chunkhash:4].bundle.js"
    }

9.2 resolve路径配置

9.2.1 resolve介绍

  • resolve提供简便配置,编写业务代码时简化工作。
    • alias 别名,提供路径的简写
      • 例如,@代表src目录(根目录)
    • extensions 扩展省略,定义可省略的扩展名
      • 如定义js后缀可省略

9.2.2 示例

javascript 复制代码
// webpack.config.js
module.exports = {    、
	resolve: {
        alias: {
            "@css":'/css'
        },
        extensions: [".js",".css",".json"]
    },
    optimization: {
    }
}

app.js路径依赖简写

javascript 复制代码
// app.js
import "./test";
import './a'
import '@css/test2.css'

注意结构

打包成功。

9.3 require.context批量引入

require.context:webpack提供的api,支持批量引入指定文件夹下的所有文件。

9.3.1 示例

现需要引入mode文件夹下所有的三个js文件。

mode\num1.js,mode\num2.js,mode\num3.js

示例

javascript 复制代码
// mode\num1.js
export default 1;

按照es6的写法,需要一个个引入

javascript 复制代码
// app.js
import num1 from './mode/num1';
import num2 from './mode/num2';
import num3 from './mode/num3';

项目数量较多时,这个方法很麻烦。

require.context使用

require.context(),参数1:要引入的文件夹地址,是否引入其下子文件夹,目标文件(要引入的文件)

javascript 复制代码
import "./test";
import './a'
import '@css/test2.css'
const r = require.context("./mode", false, /.js/);
console.log("🚀 ~ r:", r)
// 
r.keys().forEach((item) => {
    r(item)
    console.log("🚀 ~ r.keys ~ r(item):", r(item))
})

打包成功后浏览器打开打包后的html文件。

解释:r(item)是获取引入的文件,要获取export的值,需要r(item).default.

9.4 路径处理

9.4.1 指定打包文件存发的路径

希望打包后的文件放到dist(dist也是webpack.config.js的output指定的目录)的子目录中,如css、img等文件,与js文件分开。

css使用minicss提取的,那么直接在minicss的插件配置里直接加路径即可。

javascript 复制代码
// webpack.config.js
...
    plugins: [
        // new eslintplugin()
        new minicss({
            filename: './css/test.bundle.css'// 打包的css名称
        }),
   ]
}

其他适用filename配置名字的地方都可以这样处理。

例如图片配置

打包会同步更新

9.4.2 publicPath配置

  • 假设打包出来的js,css,都要放到cdn上。

  • 问题

    • 如果html保持相对路径,那么css等无法从cdn上查找

    假设cdn地址:http:123.23.22.123,而css路径是"./css/test.bundle.css",是找不到css地址的

  • 解决

    • output的publicPath指定cdn地址
    • 打包后,publicPath指定的路径会自动加到css等文件地址的前面
  • 适用场景

    • 资源最后放到cdn上时可以使用此配置
    • 如果只是放到自己服务器,与html相同的服务器,使用相对地址可以拿到,不需要指定publicPath
javascript 复制代码
// webpack.config.js
module.exports = {
    output: {
        path: __dirname + '/dist', // 绝对路径,__dirname是node的全局变量,表示当前目录的绝对路径
        filename: "[name].[chunkhash:4].bundle.js", //将name加到filename里,打包结果文件是app.bundle.js和app2.bundle.js,hash是对文件是否有改变的标志,:4表示截取前4位
        publicPath:"www.xx.com"// 假设www.xx.com是cdn地址
    }
}

打包结果

相关推荐
小毛驴85010 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏38 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
bingbingyihao44 分钟前
Node.js 模拟 Linux 环境
linux·node.js
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架