I recently followed the typescript guide at https://webpack.js.org/guides/typescript/ After running webpack in "production" mode, I noticed that it emitted very minimal output.
Below is the code from my src/index.ts file:
export function foo() {
return 'foo'
}
export const bar = 'bar'
When I executed the command:
webpack
I found that the 'bundle.js' file was compiled into the 'dist' folder with the following code:
(()=>{"use strict";})();
However, when I manually compiled using the 'tsc' command inside the 'src' folder, I got a JavaScript file with the following content:
"use strict";
exports.__esModule = true;
exports.bar = exports.foo = void 0;
function foo() {
return 'foo';
}
exports.foo = foo;
exports.bar = 'bar';
I expected both the 'dist/bundle.js' and 'src/index.js' files to have similar functionality. But currently, the 'dist/bundle.js' file is not functioning properly.
Additionally, here are snippets of code from other related files:
// package.json
{
"name": "webpack-ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.2.6",
"typescript": "^4.5.2",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
If anyone can offer assistance, I would greatly appreciate it. Thank you.