tessl/npm-tarojs--webpack-runner
Webpack runner for Taro that transforms Taro compilation configurations into Webpack configurations for H5/web builds
—
Pending
build-runner.mddocs/
Main Build Runner
The main build runner function that executes the complete Taro H5 build process, handling both development and production modes based on configuration.
Capabilities
Default Export Function
Main webpack runner function that builds Taro projects for the web/H5 platform.
/**
* Main webpack runner function for Taro H5 builds
* @param appPath - Absolute path to the application root directory
* @param config - Taro build configuration object
* @returns Promise that resolves when build completes
*/
function webpackRunner(appPath: string, config: BuildConfig): Promise<void>;Parameters:
appPath(string): Absolute path to the application root directory containing the Taro projectconfig(BuildConfig): Complete build configuration object with build options, webpack customization, and platform settings
Behavior:
- Production mode (
config.isWatch: false): Performs optimized build with minification and asset optimization - Development mode (
config.isWatch: true): Starts development server with hot reloading and file watching - Automatically detects available ports for development server
- Handles webpack configuration generation based on build mode
- Executes custom hooks and webpack chain modifications
- Provides error handling and build status reporting
Usage Examples:
import webpackRunner from "@tarojs/webpack-runner";
// Production build
await webpackRunner("/Users/dev/my-taro-app", {
buildAdapter: "h5",
sourceRoot: "src",
outputRoot: "dist",
isWatch: false,
entry: {
app: "./src/app.tsx"
},
publicPath: "/",
onBuildFinish: ({ error, stats, isWatch }) => {
if (error) {
console.error("Build failed:", error);
} else {
console.log("Build completed successfully");
}
}
});
// Development build with dev server
await webpackRunner("/Users/dev/my-taro-app", {
buildAdapter: "h5",
sourceRoot: "src",
outputRoot: "dist",
isWatch: true,
devServer: {
port: 3000,
host: "localhost",
open: true
},
router: {
mode: "hash",
basename: "/"
}
});
// Build with webpack chain customization
await webpackRunner("/Users/dev/my-taro-app", {
buildAdapter: "h5",
sourceRoot: "src",
outputRoot: "dist",
isWatch: false,
webpackChain: (chain, webpack) => {
// Custom webpack configuration
chain.resolve.alias.set("@components", path.resolve("src/components"));
},
modifyWebpackChain: async (chain, webpack, data) => {
// Additional webpack modifications
chain.plugin("custom-plugin").use(CustomPlugin, [options]);
}
});Internal Build Functions
The main runner delegates to specialized build functions based on the configuration:
/**
* Production build function (internal)
* Configures webpack for optimized production builds
*/
function buildProd(
appPath: string,
config: BuildConfig,
appHelper: AppHelper
): Promise<void>;
/**
* Development build function (internal)
* Configures webpack dev server for development builds
*/
function buildDev(
appPath: string,
config: BuildConfig,
appHelper: AppHelper
): Promise<any>;Error Handling:
The runner includes comprehensive error handling:
- Build errors: Captured and passed to
onBuildFinishcallback - Configuration errors: Thrown as exceptions with descriptive messages
- Development server errors: Logged and cause process termination
- Webpack compilation errors: Handled based on
errorLevelconfiguration
Build Lifecycle:
- Configuration Processing: Merges and validates build configuration
- App Helper Creation: Parses Taro app structure and entry points
- Webpack Chain Generation: Creates webpack configuration based on build mode
- Chain Customization: Applies user-defined webpack chain modifications
- Compilation: Executes webpack build or starts development server
- Asset Processing: Handles build asset modifications via hooks
- Completion: Triggers build finish callbacks and error handling
Install with Tessl CLI
npx tessl i tessl/npm-tarojs--webpack-runner