Utilizing Webpack With Typescript
What Is Webpack?
Integrating Webpack Into Typescript
In a previous article I discussed how to install typescript and what it is. We will now go over the installation of webpack. The following command should be entered into your terminal within the root of your typescript project (we will go over what some of these do in a second)
npm install –save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
here are a few of the aspects of this command so that you have a general idea of what they all do:
- webpack-cli — allows for some terminal command for webpack
- typescript — always a good idea to have a local version of typescript
After this finishes installation you should change a few things within your project. Within your html file you’ll want to change the script tag to point to wherever your bundle.js will reside. You’ll also want to make sure all of the imports within all of the typescript files no longer have the “.ts” extension on the end. Inside tsconfig.js (which I have an article on) you’ll want to make sure both “target” and “module” are set to “ES6”. You’ll also want to make sure “moduleResolution” is set to “node”, your “rootDir” option is commented out, and your “sourceMap” is set to true. Now within the root of your project you’ll want to create a special file that webpack will look for called webpack.config.js. In it you’re going to define the settings you want webpack to use. For simplicity sake I’ve shambled one together with some comments which denote what certain options do. Go ahead and have a look:
Once this is setup and saved you can spin up the server by entering the following command within the root of your project in terminal:
npm run build
Once this is up and running you can go the page and verify the network requests have diminished by checking the network tab within devtools.