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

9 webpack技巧性配置

9.1 hash值的意义

9.1.1 hash控制

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

【项目发版】

现象：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地址
    }
}

打包结果