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

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',
  },
  output: {
    chunkFilename: '[name].js',
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, '../dist'),
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.js', 'cjs'],
    symlinks: false
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

tsconfig.json配置：

• module：esnext不存在时，webpack不会对引入模块单独打包
• moduleResolution不设置为node时，无法识别引入模块

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": []
}

模块实现：
webpackMode如果不写的话，模块是不会单独打包成一个独立模块的。
对于懒加载来说，不是独立模块是没办法在需要的时候单独加载的。

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  'module'
);