webpack：从 entry 走到浏览器实际加载的 chunks

// examples/build-tools/configs/webpack.config.mjs
export default {
  context,
  mode: 'production',
  target: ['web', 'es2022'],
  entry: './src/main.ts',
};

import { label, tools } from './catalog.ts';
import './side-effect.ts';
import './styles.css';

button.addEventListener('click', async () => {
  const { renderDetail } = await import('./detail.ts');
  renderDetail(detail, tool);
});

export default {
  resolve: {
    extensions: ['.ts', '.js'],
    conditionNames: ['browser', 'import', 'default'],
    alias: {
      '@': new URL('../src/', import.meta.url).pathname,
    },
  },
};

export default {
  module: {
    rules: [
      { test: /\.svg$/i, type: 'asset/resource' },
      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
    ],
  },
};

experiments: {
  css: true,
  typescript: true,
}

export default function bannerLoader(source, inputMap) {
  this.cacheable(true);
  this.addDependency(this.resourcePath);
  return `/* built by bannerLoader */\n${source}`;
}

export default function asyncLoader(source) {
  const callback = this.async();
  someAsyncRead(this.resourcePath, (error, extra) => {
    if (error) return callback(error);
    callback(null, `${extra}\n${source}`);
  });
}

export function pitch(remainingRequest) {
  if (this.resourceQuery.includes('raw')) {
    return `export default ${JSON.stringify(`-!${remainingRequest}`)};`;
  }
}

class AssetListPlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('AssetListPlugin', (compilation) => {
      compilation.hooks.processAssets.tap(
        {
          name: 'AssetListPlugin',
          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT,
        },
        (assets) => {
          const body = Object.keys(assets).sort().join('\n');
          compilation.emitAsset(
            'asset-list.txt',
            new compiler.webpack.sources.RawSource(body),
          );
        },
      );
    });
  }
}

pnpm --filter @roadmap/build-tools-slice build:webpack
node -e "const s=require('./examples/build-tools/dist/webpack/stats.json'); console.log(s.chunks.map(c => ({id:c.id, initial:c.initial, files:c.files, modules:(c.modules||[]).map(m=>m.name||m.nameIdentifier)})))"

export default {
  optimization: {
    usedExports: true,
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
        },
      },
    },
  },
};

export default {
  devtool: 'source-map',
  stats: {
    all: false,
    assets: true,
    chunks: true,
    chunkModules: true,
    modules: true,
  },
};

const stats = JSON.parse(await readFile('examples/build-tools/dist/webpack/stats.json', 'utf8'));
const asyncDetail = stats.chunks.find((chunk) =>
  chunk.initial === false &&
  chunk.modules?.some((module) =>
    /(?:^|[\\/])detail\.ts/.test(module.nameIdentifier ?? module.name ?? ''),
  ),
);

export default {
  cache: {
    type: 'filesystem',
    version: process.env.BUILD_TARGET ?? 'local',
    buildDependencies: {
      config: [new URL('./webpack.config.mjs', import.meta.url).pathname],
    },
  },
};

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept('./detail.ts', async () => {
    const next = await import('./detail.ts');
    console.log('detail module updated', next);
  });
}

export default {
  output: {
    filename: 'assets/[name].[contenthash:8].js',
    chunkFilename: 'assets/[name].[contenthash:8].js',
    cssFilename: 'assets/[name].[contenthash:8].css',
    publicPath: './',
    clean: true,
  },
};

pnpm --filter @roadmap/build-tools-slice build:webpack

examples/build-tools/src/main.ts
examples/build-tools/src/catalog.ts
examples/build-tools/src/detail.ts
examples/build-tools/src/side-effect.ts
examples/build-tools/src/styles.css

examples/build-tools/dist/webpack/index.html
examples/build-tools/dist/webpack/stats.json
examples/build-tools/dist/webpack/assets/*.js
examples/build-tools/dist/webpack/assets/*.css
examples/build-tools/dist/webpack/assets/*.js.map
examples/build-tools/dist/webpack/assets/*.css.map

find examples/build-tools/dist/webpack -type f | sort
node --test examples/build-tools/test/artifacts.test.mjs