webpack相关记录

webpack import文件后缀搜索

    resolve: {
        extensions: ['.js', '.vue', '.ts', '.tsx'],
    },

webpack之splitChunks

• module：就是js的模块化webpack支持commonJS、ES6等模块化规范，简单来说就是你通过import语句引入的代码。
• chunk: chunk是webpack根据功能拆分出来的，包含三种情况：
  • 你的项目入口（entry）
  • 通过import()动态引入的代码
  • 通过splitChunks拆分出来的代码
• chunk包含着module，可能是一对多也可能是一对一。

 splitChunks: {
     cacheGroups:{
          staticJS: {
              name: 'staticJS', // split UI into a single package
              priority: 30,
              test: /wangdapantest/,
              minSize: 0,
              // test: (module) => {
              //     return module?.resource?.includes("wangdapantest");
              // },
              chunks: 'async',
          }
    }
  }

提示

如果代码量太少 需要设置minSize 否则webpack可能不会拆出来新的文件

• initial 入口文件头部import引入的js如果设置了 splitChunks.cacheGroups规则 那么他的输出名字是 staticJS.js 也就是filename

  • 入口文件(app)->A->B 不管是在A 还是在 B import的js(例如static)文件 如果拆出来 都是filename 而不是chunkfilename

• async入口文件或者入口文件import的js 里有 import("static") 的js文件 那么 static就是解析出来的chunk文件 也就是chunkfilename (static.[hash].chunk.js)

  • async 模式下拆出来的文件都是chunkfilename

• all 不管是从什么地方引入的都可以打包 如果入口文件引入了 那就是filename输出 如果是异步引入的js引入的 那就是thunk文件 也就是chunkfilename

webpack之stats

    stats: {

       entrypoints:true,
       assets:true,
       assetsSpace:100000,

       chunks:true,
       chunkOrigins:true,
   },

tree-shaking

告诉编译器当前函数调用不会产生副作用

import {foo} from './utils'
/*#__PURE__*/ foo()