Webpack
Webpack integration is pretty simple. You can use ts-loader
, a TypeScript loader, combined with source-map-loader
for easier debugging. Simply run
npm install ts-loader source-map-loader
and merge in options from the following into your webpack.config.js
file:
module.exports = { entry: "./src/index.ts", output: { filename: "./dist/bundle.js", }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { loaders: [ // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. { test: /\.tsx?$/, loader: "ts-loader" } ], preLoaders: [ // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { test: /\.js$/, loader: "source-map-loader" } ] }, // Other options... };
It’s important to note that ts-loader
will need to run before any other loader that deals with .js
files. You can see an example of using Webpack in our tutorial on React and Webpack.
Please login to continue.