A browser cannot resolve application imports by searching local files as a JavaScript runtime can. Each web file must instead be requested over HTTP. Bundling resolves dependencies during compilation and packages the files an application uses for efficient delivery. A bundle can include JavaScript and other content, such as CSS; large applications can split optional content into separate bundles loaded when needed. section 16.3
For a TypeScript web application using webpack:
- Install webpack, webpack-cli and ts-loader as development dependencies. The loader compiles TypeScript and feeds the JavaScript into the bundle. section 16.3
- Set an entry file, an output filename and a loader rule in webpack.config.js. Run npx webpack to create dist/bundle.js. section 16.3
- For production, run npx webpack --mode "production". Webpack writes a minified bundle to dist, optimizing its contents for size rather than readability. section 17.4.5
Listing 16.7 The contents of the webpack.config.js file in the webapp folder
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: "./src/index.ts",
output: { filename: "bundle.js" },
resolve: { extensions: [".ts", ".js"] },
module: {
rules: [
{ test: /\.ts/, use: "ts-loader", exclude: /node_modules/ }
]
}
};
The development configuration starts at ./src/index.ts, writes bundle.js, resolves .ts and .js imports, and passes TypeScript files through ts-loader. section 16.3
Delivering the bundle during development
Place index.html in assets with <script src="bundle.js"></script>, configure Webpack Dev Server to serve assets on port 4500, and run npx webpack serve. The browser requests bundle.js when it processes the script element. During development, the generated bundle is served from memory rather than written to dist; changing a code file triggers a new bundle and an automatic browser reload. section 16.4
The compilation path depends on the toolchain. In a React setup, Babel transforms TypeScript into JavaScript while the TypeScript compiler has noEmit enabled; webpack then bundles the resulting JavaScript and resources. Do not assume that ts-loader is required in every TypeScript application. section 20.2
