webpack 学习笔记

copy-webpack-plugin

是一个用于在 webpack 构建过程中复制文件和目录的插件。它可以将指定的文件或目录从源路径复制到目标路径，以便在输出目录中包含这些文件。

    new CopyWebpackPlugin({
      patterns: [
        { from: pathConfig.resolve('src/assets'), to: pathConfig.resolve('public/assets'), noErrorOnMissing: true },
      ],
    }),

HappyPack

Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度

DllPlugin

预编译资源，将项目依赖的基础模块（第三方模块）抽离出来，然后打包到一个个单独的动态链接库中。当下一次构建打包时，通过webpackReferencePlugin导入，如果打包过程中发现需要导入的模块存在于某个动态链接库中，就不能再次被打包，而是去动态链接库中get到。相当于是一个预构建，这样只要一次预构建后没有额外的依赖变更，那么启动开发环境的速度就会显著提升。只针对提升开发环境的构建速度

plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, 'dll', '[name]-manifest.json'),
      name: '[name]',
    }),
  ],

                       
"scripts": {
  "dll": "webpack --config webpack.dll.config.js"
}

splictchunk

更多的是对拆出来的chunks 做http catch 浏览器缓存 ，再者是减小主包main的体积，提升加载速度， 多入口打包，公共common目录下拆为一个chunks，防止重复打包

css-minimizer-webpack-plugin

用CSS代码的去重和压缩。

webpack三种hash值的区别

Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
Chunkhash：和 Webpack 打包的 chunk 有关，不同的 entry 会生出不同的 chunkhash
Contenthash：根据文件内容来定义 hash，文件内容不变，则 contenthash 不变
https://blog.csdn.net/weixin_39987434/article/details/132478851

terser-webpack-plugin

代码压缩plugn，移除 Javascript代码中的不必要的字符和语句、丑化代码变量等从而减小代码的体积。配置项可以清除代码中的 console、debugger 等代码并进行优化，webpak5.0以上默认内置无需配置。
https://zhuanlan.zhihu.com/p/646559616?utm_id=0

cache-loader

webpack5 新增持久化缓存，提升打包速度
对于rule匹配的某个文件内容不变，经过相同的 loader 解析后，解析的结果保持不变，使用 cache-loader 可以将 loader 的解析结果保存下来，让后续的解析可以直接使用保存后的结果。
在一些性能开销较大的 loader 之前添加 cache-loader，能将结果缓存到磁盘里。保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用
https://juejin.cn/post/6946008768702316558?searchId=20240416202518CBCF6891855FF6138651

output libraryTarget

它用于指定构建的库（library）应该以何种形式暴露其模块

module.exports = {
  // ...
  output: {
    libraryTarget: 'module'     //commonjs2      //  umd
  },
  // ...
};

webpack 、rollup 打包后产物对比

webpack有很多的代码注入，都是自己的兼容代码，目的是自己实现require，modules.exports，import…form… ， export，让浏览器可以兼容cjs和esm语法，相当于webpack自己实现polyfill支持模块语法.

rollup 诞生在esm标准出来后，rollup是利用高版本浏览器原生支持esm， 最终打包到bundle.js， 减少了不必要的代码注入，代码结构也是清晰干净的， 浏览器直接可以支持script type=“module”> 的方式引入，同时支持配置输出多种格式的模块文件，如esm、cjs、umd、amd。在package.json中定义好exports 字段，就可以根据不同环境的引入，读取不同模式的代码文件 。 对于cjs语法，需要插件@rollup/plugin-commonjs进行转换为esm语法，来兼容浏览器环境，所以rollup更好的适合组件库打包，体积小，速度快，但不支持热更新

开发者写esm代码 -> rollup通过入口，递归识别esm模块 -> 最终打包成一个或多个bundle.js -> 浏览器直接可以支持引入<script type="module"> 如下：

<script type="module">
   import add from './a.js';
   import('./a.js').then(module => {
    	let add = module.default
    	console.log(add(1, 3)); // 4
	})
</script>

1、module.exports require() 会被换成 __webpack_require__函数去模拟esm的exports对象 让浏览器支持
2、import('xx').then()会被替换成webpack的api（__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 1)).then()）
最终执行时会生成script标签添加到dom中

打包开源库，rollup更好，rollup本身也支持很多插件，生态也成熟
打包应用程序：得看 应用程序 需不需要兼容老浏览器
https://juejin.cn/post/7053998924071174175#heading-2
https://blog.csdn.net/weixin_39843414/article/details/114006085

webpack 打包后的结构代码

webpack 的 runtime，也就是 webpack 最后生成的代码，做了以下三件事:
1、webpack_modules: 维护一个所有模块的数组。将入口模块解析为 AST，根据 AST 深度优先搜索所有的模块，并构建出这个模块数组。每个模块都由一个包裹函数 (module, module.exports, webpack_require) 对模块进行包裹构成。
2、webpack_require(moduleId): 手动实现加载一个模块。对已加载过的模块进行缓存，对未加载过的模块，执行 id 定位到 webpack_modules 中的包裹函数，执行并返回 module.exports，并缓存
3、webpack_require(0): 运行第一个模块，即运行入口模块
另外，当涉及到多个 chunk 的打包方式中，比如 code spliting，webpack 中会有 jsonp 加载 chunk 的运行时代码。
以下是 webpack runtime 的最简代码

/******/ var __webpack_modules__ = [
  ,
  /* 0 */ /* 1 */
  /***/ (module) => {
    module.exports = (...args) => args.reduce((x, y) => x + y, 0);
 
    /***/
  },
  /******/
];
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
  /******/ // Check if module is in cache
  /******/ var cachedModule = __webpack_module_cache__[moduleId];
  /******/ if (cachedModule !== undefined) {
    /******/ return cachedModule.exports;
    /******/
  }
  /******/ // Create a new module (and put it into the cache)
  /******/ var module = (__webpack_module_cache__[moduleId] = {
    /******/ // no module.id needed
    /******/ // no module.loaded needed
    /******/ exports: {},
    /******/
  });
  /******/
  /******/ // Execute the module function
  /******/ __webpack_modules__[moduleId](
    module,
    module.exports,
    __webpack_require__,
  );
  /******/
  /******/ // Return the exports of the module
  /******/ return module.exports;
  /******/
}
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
  const sum = __webpack_require__(1);
 
  sum(3, 8);
})();

进一步简洁代码结构：

const __webpack_modules__ = [() => {}];
const __webpack_require__ = (id) => {
  const module = { exports: {} };
  const m = __webpack_modules__[id](module, __webpack_require__);
  return module.exports;
};

__webpack_require__(0);

http://q.shanyue.tech/fe/webpack/729

webpack5 之 优化效率工具 ( 进度条、打包速度分析 、打包后体积分析)

1、进度条可视化

const WebpackBar = require('webpackbar');
  plugins: [
    new WebpackBar({ name: 'web dev' }),
]

2、速度分析

"devDependencies": {
    "speed-measure-webpack-plugin": "^1.5.0"
  },

3、打包体积分析

  "devDependencies": {
    "webpack-bundle-analyzer": "^4.6.1"
  },

externals

externals用于提取第三方依赖包，使用cdn资源的方式将第三方依赖包引入项目，可以大大减少项目打包体积,相当于变成全局变量的方式引入，仍然不变的写法import $ from ‘jquery’;