Webpack is a JavaScript module bundler that follows an application's dependencies from an entry file and packages the required assets into one or more bundles. A single request can deliver the JavaScript needed by the browser, while CSS and other content can also be included. Bundling can minify and compress content, and large applications can split optional code into separately loaded bundles. section 16.3
A practical TypeScript setup uses webpack for bundling and ts-loader for processing files with the .ts extension. The configuration names src/index.ts as the entry, produces bundle.js, resolves TypeScript and JavaScript files, and excludes node_modules from the loader rule. section 16.3
Minimal TypeScript configuration
Create webpack.config.js in the webapp folder:\n\nmodule.exports = {\n mode: "development",\n devtool: "inline-source-map",\n entry: "./src/index.ts",\n output: { filename: "bundle.js" },\n resolve: { extensions: [".ts", ".js"] },\n module: {\n rules: [\n { test: /\\.ts/, use: "ts-loader", exclude: /node_modules/ }\n ]\n }\n};\n\nInstall webpack, webpack-cli, and ts-loader as development dependencies, then run npx webpack in the webapp folder to create the bundle.
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/ }
]
}
};
Inspect the complete webpack.config.js listing for the entry, output, resolution, source-map, and ts-loader settings. section 16.3
