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

// 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 示例

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

app.js路径依赖简写

// 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
示例

// mode\num1.js
export default 1;

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

// app.js
import num1 from './mode/num1';
import num2 from './mode/num2';
import num3 from './mode/num3';

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

require.context使用

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

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的插件配置里直接加路径即可。

// 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

// 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地址
    }
}

打包结果