构建工具

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        // 链式调用：从右往左，从下往上执行
        use: [
          'style-loader',   // 3. 将 CSS 注入 DOM
          'css-loader',     // 2. 解析 @import 和 url()
          'sass-loader'     // 1. 将 SCSS 编译为 CSS
        ]
      }
    ]
  }
};

class MyPlugin {
  apply(compiler) {
    // 在 emit 阶段（写入文件前）介入
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      // 遍历所有输出文件
      for (const filename in compilation.assets) {
        if (filename.endsWith('.js')) {
          const source = compilation.assets[filename].source();
          // 添加版权注释
          compilation.assets[filename] = {
            source: () => `/* Copyright 2024 */\n${source}`,
            size: () => source.length + 20
          };
        }
      }
      callback();
    });
  }
}

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // 第三方库单独打包
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10
        },
        // 公共模块提取
        commons: {
          minChunks: 2,
          name: 'commons',
          chunks: 'all',
          priority: 5
        }
      }
    }
  }
};

// app1/webpack.config.js（提供模块）
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

// app2/webpack.config.js（消费模块）
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

// app2 中使用
const RemoteButton = React.lazy(() => import('app1/Button'));

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus']
        }
      }
    }
  }
});

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/my-lib.esm.js',
      format: 'esm',
      sourcemap: true

  // ... 中间省略 ...

    resolve(),
    commonjs(),
    terser()
  ],
  external: ['lodash']  // 外部依赖，不打包进去
};

import * as esbuild from 'esbuild';

await esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  outfile: 'dist/bundle.js',
  // 定义环境变量
  define: {
    'process.env.NODE_ENV': '"production"'
  },
  // 外部依赖
  external: ['fs', 'path']
});

// .swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es2015",
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  },
  "minify": {
    "compress": true,
    "mangle": true
  }
}

// rspack.config.js
module.exports = {
  entry: { main: './src/index.js' },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        type: 'javascript/auto'
      }
    ]
  },
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './index.html' })
  ]
};

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js'
        }
      }
    }
  }
};

// 开发模式启用
// next dev --turbo

// 1. 按需导入
import debounce from 'lodash/debounce';  // ✅ 只导入单个函数
import _ from 'lodash';                   // ❌ 导入整个库

// 2. Tree Shaking 友好的导入
import { Button, Input } from 'element-plus';  // ✅ 具名导入
import ElementPlus from 'element-plus';         // ❌ 整体导入

// 3. 动态导入（Code Splitting）
const LazyComponent = React.lazy(() => import('./HeavyComponent'));

// 4. 外部化大型库（CDN）
module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};