webpack动态加载——懒加载实现

最新推荐文章于 2025-10-23 10:36:58 发布

原创

最新推荐文章于 2025-10-23 10:36:58 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

本文介绍了webpack动态加载，特别是懒加载的实现。在基础配置文件`conf.base.cjs`中，`symlinks`配置会影响模块解析。若使用`npm link`，需关闭该选项以避免问题。`tsconfig.json`中，`module`设为`esnext`，`moduleResolution`设为`node`，确保webpack正确处理模块。`webpackMode`的设置至关重要，不设置或设为`lazy`，模块不会单独打包，这对于懒加载是必要的，因为只有独立模块才能按需加载。

webpack配置如下：

./conf.base.cjs 基础配置

其中symlinks配置是用来标识是否将模块引入解析为真实路径。
如果你需要打包的模块是自己用npm link链接的模块记得关闭
因为使用本地真实路径，node_modules的相关配置都会失效的。

const path = require('path');
const {
   
    CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
   
   
  entry: {
   
   
    index: './src/index.ts',
  },