tessl/npm-tarojs--webpack-runner

Webpack runner for Taro that transforms Taro compilation configurations into Webpack configurations for H5/web builds

—

Pending

Overview

Eval results

Files

Webpack Chain Customization

Name: tessl/npm-tarojs--webpack-runner
Author: tessl

Functions and utilities for customizing webpack configuration through webpack-chain, enabling advanced build customization for Taro H5 projects.

Capabilities

Chain Customization Function

Applies custom webpack chain modifications using user-provided functions.

/**
 * Customizes webpack chain configuration with user-provided functions
 * @param chain - Webpack chain object to be modified
 * @param modifyWebpackChainFunc - Function to modify webpack chain
 * @param customizeFunc - Optional additional customization function
 * @returns Promise that resolves when customization completes
 */
function customizeChain(
  chain: any,
  modifyWebpackChainFunc: Func,
  customizeFunc?: BuildConfig['webpackChain']
): Promise<void>;

Parameters:

chain (any): Webpack-chain instance containing the current webpack configuration
modifyWebpackChainFunc (Func): Primary function for modifying the webpack chain, receives chain, webpack, and component data
customizeFunc (BuildConfig['webpackChain']): Optional secondary customization function

Usage Examples:

import { customizeChain } from "@tarojs/webpack-runner";

// Basic chain customization
await customizeChain(
  webpackChain,
  async (chain, webpack, data) => {
    // Add custom alias
    chain.resolve.alias.set("@utils", path.resolve("src/utils"));
    
    // Add custom plugin
    chain.plugin("define-plugin").use(webpack.DefinePlugin, [{
      "process.env.API_URL": JSON.stringify("https://api.example.com")
    }]);
    
    // Modify loader configuration
    chain.module
      .rule("typescript")
      .test(/\.tsx?$/)
      .use("ts-loader")
      .loader("ts-loader")
      .options({
        transpileOnly: true,
        compilerOptions: {
          jsx: "react"
        }
      });
  }
);

// Advanced customization with both functions
await customizeChain(
  webpackChain,
  async (chain, webpack, data) => {
    // Primary modifications with access to component data
    const { componentConfig } = data;
    
    // Configure based on component configuration
    if (componentConfig.includeAll) {
      chain.plugin("all-components").use(AllComponentsPlugin);
    }
  },
  (chain, webpack) => {
    // Secondary customization
    chain.optimization.splitChunks({
      chunks: "all",
      cacheGroups: {
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          priority: 10
        }
      }
    });
  }
);

Configuration Generation Utilities

Utilities for generating and processing webpack configurations for different build modes.

/**
 * Processes build configuration and adds sass loader options
 * @param buildConfig - Base build configuration object
 * @returns Promise resolving to enhanced build configuration
 */
function makeConfig(buildConfig: BuildConfig): Promise<BuildConfig & { sassLoaderOption: any }>;

Usage Example:

import { makeConfig } from "@tarojs/webpack-runner/dist/utils/chain";

// Process configuration before build
const enhancedConfig = await makeConfig({
  buildAdapter: "h5",
  sourceRoot: "src",
  outputRoot: "dist",
  sass: {
    resource: ["src/styles/variables.scss"],
    data: "$primary-color: #007bff;"
  }
});

// Now includes sassLoaderOption for webpack configuration
console.log(enhancedConfig.sassLoaderOption);

Webpack Chain Context Data

The modification functions receive contextual data for advanced customization:

interface IModifyChainData {
  componentConfig: IComponentConfig;
}

interface IComponentConfig {
  includes: Set<string>;
  exclude: Set<string>;
  thirdPartyComponents: Map<string, any>;
  includeAll: boolean;
}

Chain Modification Patterns:

// Plugin addition
chain.plugin("custom-plugin").use(CustomPlugin, [options]);

// Loader configuration
chain.module
  .rule("custom-rule")
  .test(/\.custom$/)
  .use("custom-loader")
  .loader("custom-loader")
  .options(loaderOptions);

// Alias configuration
chain.resolve.alias
  .set("@components", path.resolve("src/components"))
  .set("@utils", path.resolve("src/utils"));

// Output configuration
chain.output
  .path(path.resolve("dist"))
  .filename("[name].[contenthash].js")
  .publicPath("/static/");

// Optimization configuration
chain.optimization
  .minimize(true)
  .minimizer("terser")
  .use(TerserPlugin, [terserOptions]);

// Development server configuration  
chain.devServer
  .port(3000)
  .host("localhost")
  .hot(true)
  .compress(true);

Integration with Build Process:

The chain customization is integrated into the main build process:

Base Configuration: Webpack chain is generated based on build mode (dev/prod)
Primary Customization: modifyWebpackChainFunc is executed with component data
Secondary Customization: Optional webpackChain function is executed
Webpack Ready Hook: onWebpackChainReady callback is triggered if provided
Compilation: Modified chain is converted to webpack configuration for compilation

Error Handling:

Function execution errors are propagated to the main build process
Invalid chain modifications will cause webpack compilation errors
Both synchronous and asynchronous customization functions are supported

Install with Tessl CLI

npx tessl i tessl/npm-tarojs--webpack-runner

docs