![\"Typescript](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/08\/typescript-webpack.png\")
\nUsed in many modern projects, webpack is an amazing tool that optimizes application resources so that they work more efficiently and effectively on any device. webpack helps to compile and bundle modules into a single file, reducing HTTP requests and improving application performance as a result.<\/p>\n
With webpack, TypeScript code is compiled into a JavaScript file that is browser-friendly. With webpack loaders, you can also convert SASS and LESS files into a single CSS bundle file.<\/p>\n
In this article, we\u2019ll learn how to use webpack to compile TypeScript to JavaScript, bundle source code into a single JavaScript file, and use a source map for debugging. We\u2019ll also explore how to use webpack plugins.<\/p>\n
To follow along with this tutorial, you\u2019ll need the following:<\/p>\n
Let\u2019s get started!<\/p>\n
Jump ahead:<\/em><\/p>\n By default, webpack only understands JavaScript files, treating every imported file as a module. webpack cannot compile or bundle non-JavaScript files, therefore, it uses a loader.<\/p>\n Loaders tell webpack how to compile and bundle static assets. They are used for compiling TypeScript modules into JavaScript, handling application styles, and even linting your code with ESLint.<\/p>\n A few webpack loaders<\/a> include ts-loader, css-loader, style-loader, and more; we\u2019ll discuss them later in this tutorial.<\/p>\n Let\u2019s start by setting up our project. First, you should have TypeScript installed on your computer. To install TypeScript globally, use the command below:<\/p>\n Installing TypeScript globally eliminates the need to install TypeScript each time you start a new project.<\/p>\n Next, we\u2019ll install the webpack and ts-loader<\/a> packages as dependencies in our project:<\/p>\n By default, webpack does not need a configuration file. It will assume that the entry point for your project is If you want to use plugins or loaders, then you\u2019ll need to use the webpack configuration file, allowing you to specify how webpack will work with your project, which files to compile, and where the output bundle file will be.<\/p>\n Let\u2019s add the webpack configuration file to our project. From the project root folder, create a Let\u2019s review some of the webpack configuration options. For one, the The The TypeScript configuration file controls how TypeScript will be compiled to JavaScript and specifies the various compiler options required for transpiling TypeScript.<\/p>\n From the project root folder, create the The Now, we need to add a webpack script that will run the To add the webpack script, open the The Now, let\u2019s create a simple TypeScript program that will subtract two numbers. Inside the Next, create another Running the Running the After running the build command, webpack will transpile the two TypeScript files into JavaScript code and generate a The When the filename of the bundle changes or is hashed, Next, we need to import and add The template is a custom HTML file generated by You don\u2019t have to include the script or link tags in the custom HTML; Running the app in production mode will generate the css-loader tells webpack how to work with the CSS module. It interprets Bundling CSS files with style-loader makes HTML page styles unresponsive until the The We can install css-loader and Now, let\u2019s add the css-loader and At the top of the Then, we\u2019ll add a new rule to the When css-loader compiles all the CSS files into JavaScript, Next, we\u2019ll add Now that we\u2019ve configured Inside Running We can use the Run the installation command below to install Let\u2019s add Then, we\u2019ll add a new optimization property to the webpack configuration as follows:<\/p>\n When we run the build command, In the current version of webpack at the time of writing, v5.74.0 and later, you don\u2019t have to install the \n
HtmlWebpackPlugin<\/code><\/a><\/li>\nMiniCssExtractPlugin<\/code><\/a><\/li>\nCopywebpackplugin<\/code><\/a><\/li>\n
\nwebpack loaders<\/h2>\n
Setting up webpack and TypeScript<\/h2>\n
npm install -g typescript\n<\/pre>\n
npm init -y\nnpm install -D webpack webpack-cli ts-loader webpack-dev-server<\/pre>\n
webpack configuration<\/h2>\n
src\/index.js<\/code> and will output the minified and optimized result in dist<\/code>\/main.js<\/code> during production.<\/p>\nwebpack.config.js<\/code> file with the following configurations:<\/p>\nconst path = require('path');\n\nmodule.exports = {\n entry: '.\/src\/index.ts',\n module: {\n rules: [\n {\n test: \/\\.ts?$\/,\n use: 'ts-loader',\n exclude: \/node_modules\/,\n },\n ],\n },\n resolve: {\n extensions: ['.tsx', '.ts', '.js'],\n },\n output: {\n filename: 'bundle.js',\n path: path.resolve(__dirname, 'dist'),\n },\n devServer: {\n static: path.join(__dirname, \"dist\"),\n compress: true,\n port: 4000,\n },\n};<\/pre>\nentry<\/code> option is the starting point for the application, where webpack begins to build a dependency graph. webpack will proceed to other modules based on the entry file.<\/p>\noutput<\/code> option tells webpack where to save bundle files and allows you to name the bundle file. Finally, the module<\/code> option tells webpack how to process modules with specific rules using loaders.<\/p>\nTypeScript configuration<\/h2>\n
tsconfig.json<\/code> file and add the following configurations:<\/p>\n{\n \"compilerOptions\": {\n \"noImplicitAny\": true,\n \"target\": \"ES5\",\n \"module\": \"ES2015\"\n }\n}\n<\/pre>\ntarget<\/code> option is the version of JavaScript you want to transpile TypeScript to, while module<\/code> is the format of the import statement used. You can set the module to CommonJS, ES6, or UMD since webpack will handle all module systems.<\/p>\nPackage configuration<\/h2>\n
webpack.config.js<\/code> file for us.<\/p>\npackage.json<\/code> file and add the following scripts to the script option:<\/p>\n\"develop\": \"webpack-dev-server --mode development\",\n\"build\" : \"webpack --mode production\"<\/pre>\n
package.json<\/code> file will now contain the following configuration settings:<\/p>\n{\n \"name\": \"webpack-setup\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"src\/index.ts\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"develop\": \"webpack-dev-server --mode development\",\n \"build\": \"webpack --mode production\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"css-loader\": \"^6.7.1\",\n \"html-webpack-plugin\": \"^5.5.0\",\n \"mini-css-extract-plugin\": \"^2.6.1\",\n \"ts-loader\": \"^9.4.1\",\n \"webpack\": \"^5.74.0\",\n \"webpack-cli\": \"^4.10.0\",\n \"webpack-dev-server\": \"^4.11.1\"\n }\n}<\/pre>\nsrc<\/code> folder, create an index.ts<\/code> file and add the following TypeScript code:<\/p>\nimport { subtract } from \".\/app\";\n\nfunction init() {\n const form = document.querySelector(\"form\");\n form?.addEventListener(\"submit\", submitHandler);\n }\n\n function submitHandler(e: Event) {\n e.preventDefault();\n const num1 = document.querySelector(\"input[name='firstnumber']\") as HTMLInputElement;\n const num2 = document.querySelector(\"input[name='secondnumber']\") as HTMLInputElement;\n const result = subtract(Number(num1.value), Number(num2.value));\n const resultElement = document.querySelector(\"p\");\n if (resultElement) {\n resultElement.textContent = result.toString();\n }\n }\n\n init();\n<\/pre>\napp.ts<\/code> file and add the following code:<\/p>\nexport function subtract(firstnumber: number, secondnumber: number): number {\n return firstnumber - secondnumber;\n}\n<\/pre>\ndevelop<\/code> script will start the app in development mode:<\/p>\nnpm run develop \n<\/pre>\n
build<\/code> script will run the app in production mode:<\/p>\nnpm run build<\/pre>\n
bundle.js<\/code> file inside the dist<\/code> folder.<\/p>\nCreating HTML pages with
HtmlWebpackPlugin<\/code><\/h2>\nHtmlWebpackPlugin<\/code> allows webpack to generate a standard HTML page that will serve the generated bundle files.<\/p>\nHTMLWebpackPlugin<\/code> updates the filenames on the HTML page. First, to install HtmlWebpackPlugin<\/code>, run the command below:<\/p>\nnpm install html-webpack-plugin --save-dev<\/pre>\n
HtmlWebpackPlugin<\/code> to the webpack configuration plugin option as follows:<\/p>\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\nconst path = require('path');\n\nmodule.exports = {\n entry: '.\/src\/index.ts',\n module: {\n rules: [\n {\n test: \/\\.ts?$\/,\n use: 'ts-loader',\n exclude: \/node_modules\/,\n }\n ],\n },\n resolve: {\n extensions: ['.tsx', '.ts', '.js'],\n },\n output: {\n filename: 'bundle.js',\n path: path.resolve(__dirname, 'dist'),\n },\n\n plugins: [\n new HtmlWebpackPlugin({\n title: 'our project', \n template: 'src\/custom.html' }) \n ],\n\n devServer: {\n static: path.join(__dirname, \"dist\"),\n compress: true,\n port: 4000,\n },\n};\n<\/pre>\nHtmlWebpackPlugin<\/code> to be injected into the HTML page. To create the custom HTML, inside the src<\/code> folder, create a custom.html<\/code> file and add the following HTML code:<\/p>\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" \/>\n <\/head>\n <body>\n <div class=\"cal\">\n <center>\n <form><br>\n <p>Result : <span id=\"display\"><\/span><\/p>\n <input type=\"number\" class=\"input\" placeholder=\"Enter first number\" name=\"firstnumber\" value=\"1\" min=\"1\" min=\"9\" \/><br>\n <input type=\"number\" class=\"input\" placeholder=\"Enter second number\" name=\"secondnumber\" value=\"1\" min=\"1\" min=\"9\" \/><br><br>\n <button type=\"submit\" class=\"button\">Subtract<\/button>\n <\/form>\n <\/center>\n <\/div>\n <\/body>\n<\/html><\/pre>\n
HtmlWebpackPlugin<\/code> will take care of that by linking the bundle file URL with the generated page.<\/p>\nindex.html<\/code> HTML page inside the dist<\/code> folder.<\/p>\nBundling CSS with
MiniCSSExtractPlugin<\/code><\/h2>\n@import<\/code> and URL()<\/code> as import\/require()<\/code> and resolves them. css-loader enables webpack to compile all CSS files and convert them into JavaScript format.<\/p>\nBundle.js<\/code> is completely loaded. The style-loader injects CSS into the DOM, but the bundled JavaScript file has to load completely before the styles are injected. To solve this, we can use MiniCssExtractPlugin<\/a><\/code>.<\/p>\nMiniCssExtractPlugin<\/code> extracts CSS files and bundles them into a single bundle.css<\/code> file. This is useful for reducing the size of your CSS assets and avoiding unnecessary HTTP requests to load them.<\/p>\nMiniCssExtractPlugin<\/code> by running the commands below in the terminal:<\/p>\nnpm install css-loader --save-dev\nnpm install mini-css-extract-plugin --save-dev<\/pre>\n
MiniCssExtractPlugin<\/code> to the webpack.config.js<\/code> file.<\/p>\nwebpack.config.js<\/code> file, import the MiniCssExtractPlugin<\/code> module using the code below:<\/p>\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n<\/pre>\n
rules<\/code> property as follows:<\/p>\n\u2026\n{\n test: \/\\.css$\/,\n use: [MiniCssExtractPlugin.loader, \"css-loader\"]\n}\n\u2026\n<\/pre>\nMiniCssExtractPlugin.loader<\/code> loads the CSS into the CSS bundle file.<\/p>\nMiniCssExtractPlugin<\/code> to the plugin option as follows:<\/p>\nplugins: [\n new HtmlWebpackPlugin({\n title: 'our project', \/\/ Load a custom template (lodash by default)\n template: 'src\/custom.html' }),\n new MiniCssExtractPlugin({\n filename:\"bundle.css\"})\n ]\n<\/pre>\ncss-loader<\/code> and MiniCssExtractPlugin<\/code>, let\u2019s create a CSS file and import it into index.ts<\/code>. Inside the src<\/code> folder, create an index.css<\/code> file and add the following CSS code:<\/p>\nform {\n background-color:pink;\n margin-top:100px;\n border-radius:40px;\n}\n.cal{\n width:550px;\n height:300px;\n margin-left:400px;\n}\n\n.button{\n border-radius:10px;\n margin-top:20px;\n margin-bottom:20px;\n}\n.input{\n border-radius:10px;\n margin-top:40px;\n}\n<\/pre>\nindex.ts<\/code>, import the CSS style as follows:<\/p>\nimport styles \".\/main.css\"\n<\/pre>\n
npm run build<\/code> will bundle the CSS and apply it to index.html<\/code>. When you start the app in development mode and open http:\/\/localhost:4000<\/code> on the browser, it should look like the following image:<\/p>\n![\"Bundled](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/09\/bundled-css-previewed-localhost.png\")
<\/p>\nMinifying CSS<\/h2>\n
css-minimizer-webpack-plugin<\/code><\/a> to reduce the size of CSS files by removing unused CSS rules and keeping only the necessary ones.<\/p>\ncss-minimizer-webpack-plugin<\/code> analyzes the compiled CSS file and finds any unused styles. This plugin will then remove these unused styles from your final CSS file, thereby reducing its size.<\/p>\ncss-minimizer-webpack-plugin<\/code>:<\/p>\nnpm install css-minimizer-webpack-plugin --save-dev\n<\/pre>\n
css-minimizer-webpack-plugin<\/code> to the webpack configuration. First, import the plugin as follows:<\/p>\nconst CssMinimizerPlugin = require(\"css-minimizer-webpack-plugin\");\n<\/pre>\n
optimization: {\n minimizer: [\n new CssMinimizerPlugin()\n ],\n }\n<\/pre>\nbundle.css<\/code> will be minified but bundle.js<\/code> will not. The default bundle.js<\/code> minimizer has been overridden with the minimizer option that we set. To solve this, we need to minify the JavaScript using TerserWebpackPlugin<\/code>.<\/p>\nMinifying JavaScript<\/h2>\n
TerserWebpackPlugin<\/code><\/a> since it\u2019s included out of the box. First, we have to import TerserWebpackPlugin<\/code>:<\/p>\nconst TerserPlugin = require(\"terser-webpack-plugin\");\n<\/pre>\n
![\"Typescript](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/08\/typescript-debug-devtool.png\")
<\/p>\n![\"Debug](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/08\/debug-source-code-build-tool.png\")
<\/p>\n