TypeScript के साथ Webpack
In this page:
// webpack.config.js
module.exports = {
entry: "./src/index.ts",
module: { rules: [{ test: /\.ts$/, use: "ts-loader" }] },
resolve: { extensions: [".ts", ".js"] },
};Core Concept
Webpack एक module bundler है जो एक entry file से शुरू होकर आपके import graph को walk करता है और हर चीज़ को optimized output bundles में pack करता है; TypeScript के साथ इसे bundling process के हिस्से के रूप में .ts files compile करने के लिए ts-loader (या TypeScript preset वाला babel-loader) चाहिए।
उदाहरण: Core Concept
// webpack bundles from an entry file, using ts-loader to compile .ts files
console.log("Webpack needs ts-loader (or babel-loader) to handle TypeScript");Basic Setup
एक minimal setup dev dependencies के रूप में ts-loader और typescript add करता है, /\.tsx?$/ से match करने वाली एक module.rules entry configure करता है, और resolve.extensions में .js के साथ .ts/.tsx extensions resolve करता है।
उदाहरण: Basic Setup
// webpack.config.js
// module: { rules: [{ test: /\.tsx?$/, use: "ts-loader" }] }
// resolve: { extensions: [".ts", ".tsx", ".js"] }
console.log("ts-loader compiles .ts files as part of the bundle process");Typed Example
एक typed webpack config file खुद webpack package से Configuration type उपयोग करके TypeScript (webpack.config.ts) में लिखी जा सकती है, इसलिए एक config key में एक typo build चलाने से पहले ही catch हो जाता है।
उदाहरण: Typed Example
// webpack.config.ts
// import { Configuration } from "webpack";
// const config: Configuration = { entry: "./src/index.ts" };
console.log("Typed webpack.config.ts catches config typos at compile time");Project Usage
एक असली project में, webpack typed feature modules को demand पर load होने वाले separate chunks में code-splitting handle करता है, हर module ship होने से पहले type-check करते हुए भी initial bundle को छोटा रखते हुए।
उदाहरण: Project Usage
// import(/* webpackChunkName: "settings" */ "./settings").then(...)
console.log("Webpack code-splits typed modules into on-demand chunks");Best Practices
ts-loader का transpileOnly option एक separate fork-ts-checker-webpack-plugin के साथ type checking के लिए enable करें, इसलिए full project type errors development के दौरान हर incremental rebuild को slow नहीं करते।
उदाहरण: Best Practices
// ts-loader: { transpileOnly: true } + fork-ts-checker-webpack-plugin
console.log("Separate type checking from transpilation for faster rebuilds");resolve.extensionsमें.tsभूल जाना, इसलिए बिना extensions वाले imports नहीं मिलते।ts-loaderinstall करना लेकिनtypescriptनहीं, या.tsके लिएmodule.rulesentry के बिना एक config उपयोग करना।- यह उम्मीद करना कि webpack type-check करेगा, जब
transpileOnlyके साथ यह सिर्फ compile करता है और errors unseen रहते हैं।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: