A webpack configuration controls how a web application is bundled and served during development. It can define the entry file, output bundle name, TypeScript resolution, loaders, static assets, and development-server port. section 16.4 section 16.6.1
For browser development, the devServer setting serves files from assets on port 4500. Running npx webpack serve keeps generated bundles in memory and rebuilds them when source files change. section 16.4
Listing 16.11 Server configuration in 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/ }
]
},
devServer: {
static: "./assets",
port: 4500
}
};
Use this configuration as a complete starting point for serving a TypeScript application with webpack-dev-server. section 16.4
The configuration can also extend webpack beyond TypeScript. Adding css-loader and style-loader lets imported CSS enter the bundle and apply styles in the browser. section 16.6.1
Adding Bootstrap styles
Install Bootstrap with the CSS loaders, add a .css rule to module.rules, include "bootstrap/dist/css/bootstrap.css" from index.ts, and start the tools with npx webpack serve. section 16.6.1
Listing 16.21 Adding a loader in 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", ".css"] },
module: {
rules: [
{ test: /\.ts/, use: "ts-loader", exclude: /node_modules/ },
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
]
},
devServer: {
static: "./assets",
port: 4500
}
};
Inspect the focused module.rules change that adds CSS support while retaining the TypeScript loader and development server. section 16.6.1
