Bundle your Tabris.js app code with webpack, pt. 2
In the previous blog post about webpack we argumented why you might want to use webpack for your Tabris.js project. We also showed you how to configure the webpack build for a Tabris.js app created with tabris init. This post will show how to configure source map generation with webpack to make debugging your apps easier and why and how to maintain different configurations for development and production.
How to enable sourcemaps with webpack for a Tabris.js project?
1. Enable sourcemaps in the TypeScript compiler configuration
(optional: only needed if you use TypeScript or JSX)
This is required for debugging to work properly with the bundle produced by webpack.
Add "sourceMap": true to the compilerOptions section of your tsconfig.json:
./tsconfig.json
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "compilerOptions": { ... "sourceMap": true, ... }, ... } |
Note that using inlineSourceMap instead of sourceMap might not work properly.
2. Enable sourcemaps in the webpack configuration
Simply add devtool: 'inline-source-map' to your webpack configuration. That's it!
./webpack.config.js
|
1 2 3 4 5 6 7 |
module.exports = { ... devtool: 'inline-source-map' ... } |
Now you can debug your TypeScript/JavaScript code as usual.
Why and how to use different webpack configurations for development and production?
Since debugging is disabled for Tabris.js apps built for release, including sourcemaps in your app might not prove useful and depending on the project, they might even be undesired due to copyright reasons.
Having a separate configuration for production would enable you to minify your production bundle which can help reduce your app size. It also opens up the possibility to configure production-only code obfuscation, which might be desired for some commercial projects.
Following the recommendation of the production configuration setup guide, we will extract the common configuration to webpack.common.js and use webpack-merge to reuse it in our development and production configurations.
First install the webpack-merge dependency:
|
1 |
npm install --save-dev webpack-merge |
Then create following files:
webpack.common.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
module.exports = { entry: './src/index.jsx', externals: ['tabris', 'tabris-decorators'], output: { libraryTarget: 'commonjs2', filename: "index.js", path: __dirname + "/dist" }, resolve: { extensions: [".ts", ".tsx", ".js", ".jsx"] }, module: { rules: [ { test: /\.(j|t)sx?$/, loader: "ts-loader" } ] } } |
webpack.dev.js
|
1 2 3 4 5 6 7 8 9 |
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', }); |
webpack.prod.js
|
1 2 3 4 5 6 7 8 |
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production' }); |
Note that using mode: 'production' already results into minified bundles, so no further configuration is required for minification.
Finally, change the scripts in package.json to use the right configuration. For simplicity, we will use the production webpack configuration for all native app builds (debug and release) and the debug configuration for side-loaded code.
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ ... "scripts": { ... "build": "webpack --config=webpack.prod.js", "watch": "webpack -w --config=webpack.dev.js", ... }, ... } |
Now when you build your native Tabris.js app with tabris build, your bundle will be minified and won't include sourcemaps, and when you run npm start to side-load your app, you will able to debug your TypeScript/JavaScript source code. Enjoy!
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
