Webpack build file size is big also production mode not work - webpack-4

Question

Whole problem is whne i set mode to development in webPack config !
Log looks like this:
imgs/screen.png 231 bytes [emitted]
imgs/floor.png 1.74 KiB [emitted]
imgs/wallStock.jpg 77.1 KiB [emitted]
imgs/android-icon.png 16.4 KiB [emitted]
imgs/favicon-96x96.png 7.06 KiB [emitted]
/styles/favicon.ico 1.12 KiB [emitted]
imgs/gcheckmark.png 768 bytes [emitted]
imgs/microphone.png 545 bytes [emitted]
imgs/target.png 25.4 KiB [emitted]
imgs/share-files.png 774 bytes [emitted]
imgs/warning.png 1.3 KiB [emitted]
imgs/webcam.png 398 bytes [emitted]
visualjs2.js 1.84 MiB main [emitted] main
app.html 2.52 KiB [emitted]
/templates/register.html 1.1 KiB [emitted]
/templates/login.html 1.06 KiB [emitted]
[./node_modules/css-loader/index.js!./src/style/styles.css] ./node_modules/css-loader!./src/style/styles.css 9.28 KiB {main} [built]
[./src/app-icon.ts] 641 bytes {main} [built]
[./src/app.ts] 524 bytes {main} [built]
[./src/examples/platformer/platformer.ts] 839 bytes {main} [built]
[./src/examples/platformer/scripts/level1/level1.ts] 5.69 KiB {main} [built]
[./src/icon/permission/webcam.png] 61 bytes {main} [built]
[./src/libs/class/browser.ts] 5.02 KiB {main} [built]
[./src/libs/class/networking/network.ts] 24.9 KiB {main} [built]
[./src/libs/class/view-port.ts] 2.32 KiB {main} [built]
[./src/libs/class/visual-render.ts] 4.15 KiB {main} [built]
[./src/libs/client-config.ts] 2.15 KiB {main} [built]
[./src/libs/ioc.ts] 1.37 KiB {main} [built]
[./src/libs/multiplatform/global-event.ts] 1.48 KiB {main} [built]
[./src/libs/starter.ts] 4.71 KiB {main} [built]
[./src/style/styles.css] 1.06 KiB {main} [built]
Webpack config :
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
module.exports = {
mode: "development",
watch: true,
entry: "./src/app.ts",
output: {
filename: "visualjs2.js",
path: __dirname + "/build"
},
devtool: "inline-source-map",
resolve: {
extensions: [".js", ".ts", ".tsx", ".json"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.(jpg|png)$/, loader: "file-loader", options: {
name: '[name].[ext]',
outputPath: "./imgs"
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.(ico)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/styles'
}
}
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
// Make sure that the plugin is after any plugins that add images
new CleanWebpackPlugin(['build'], { /*exclude: ['index.html']*/ }),
new HtmlWebpackPlugin({
filename: 'app.html',
template: 'src/index.html'
}),
new HtmlWebpackPlugin({
filename: '/templates/register.html',
template: 'src/html-components/register.html'
}),
new HtmlWebpackPlugin({
filename: '/templates/login.html',
template: 'src/html-components/login.html'
}),
new ExtractTextPlugin("styles.css")
],
/*
new TypedocWebpackPlugin({
out: './api-doc',
module: 'amd',
target: 'es5',
exclude: '** /node_modules / ** / *.* ',
experimentalDecorators: true,
excludeExternals: true,
name: 'sn-theme',
mode: 'file',
theme: './sn-theme/',
includeDeclarations: false,
ignoreCompilerErrors: true,
})
*/
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 2,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
Optimisation work's.Any way only tsconfig.json-> mode : "commonjs" works.
Why visualjs2.js 1.84 MiB main file is so big !
Any suggestion?
mode : production results :
WARNING in asset size limit: The following asset(s) exceed the
recommended size limit (244 KiB). This can impact web performance.
Assets: visualjs2.js (1.52 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined
asset size exceeds the recommended limit (244 KiB). This can impact
web performance. Entrypoints: main (1.52 MiB)
visualjs2.js
WARNING in webpack performance recommendations: You can limit the size
of your bundles by using import() or require.ensure to lazy load some
parts of your application. For more info visit
https://webpack.js.org/guides/code-splitting/
Error after setup webpack.config mode: "production"
(not important to much, for this problem is on webpack area):
visualjs2.js:1 Uncaught TypeError: Cannot read property 'getWidth' of
undefined
at new e (visualjs2.js:1)
at e.singlton (visualjs2.js:1)
at new e (visualjs2.js:1)
at Object. (visualjs2.js:1)
at Object. (visualjs2.js:1)
at n (visualjs2.js:1)
at visualjs2.js:1
at visualjs2.js:1
This is my package (dependency) :
"dependencies": {
"#types/matter-js": "^0.10.2",
"express": "^4.16.4",
"matter-attractors": "^0.1.6",
"matter-js": "^0.14.1",
"npm": "^5.8.0",
"tsconfig": "^7.0.0",
"tslint": "^5.9.1",
"websocket": "^1.0.28"
},
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"source-map-loader": "^0.2.3",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typedoc": "^0.13.0",
"typedoc-webpack-plugin": "^1.1.4",
"typescript": "^2.9.2",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},