As a backend developer, I recently delved into UI technologies and experimented with converting TypeScript files (.ts) to JavaScript files (.js) using the webpack command. While the conversion works well, the generated .js file includes lengthy comments at the bottom of the .ts file, resulting in a large file size exceeding 830kb. Removing these comments reduces the file size to 130kb.
Below are the configuration files used in my project:
package.json
{
"name": "testprojwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@ionic-native/core": "^5.19.1",
"@ionic-native/in-app-browser": "^5.19.1",
"lodash-webpack-plugin": "^0.11.5",
"rxjs": "^6.5.4",
"ts-loader": "^6.2.1",
"typescript": "^3.7.5",
"webpack-dev-server": "^3.10.1"
},
"devDependencies": {
"terser-webpack-plugin": "^2.3.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}
webpack.config.json
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]
},
mode: 'production',
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new LodashModuleReplacementPlugin
],
optimization: {
nodeEnv: 'production',
minimize: true
}
};
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": false,
"noImplicitAny": true,
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"allowJs": false,
"lib": [
"es2017",
"dom"
]
}
}
I have attempted using methods like uglify and setting the mode to production. Any suggestions would be appreciated. Thank you.