Myujth

I upgraded webpack from version 3.8.1 to version 4.15.1 and when I wanted to debug code I noticed, that in my source code of my typescript components is some sort of harmony or webpack injection.

In webpack 3.8.1 it looked like this

I dont know exactly why is this happening since all what I did is that I updated several npm packages which are required for webpack 4

Package.json

 
 "name": "App",
 "private": true,
 "version": "0.0.0",
 "devDependencies": 
 "@types/tapable": "^0.2.5",
 "@types/webpack": "4.0.0",
 "@types/webpack-env": "1.13.6",
 "aspnet-webpack": "3.0.0",
 "aspnet-webpack-react": "3.0.0",
 "awesome-typescript-loader": "5.2.0",
 "babel-core": "^6.26.3",
 "css-loader": "0.28.4",
 "event-source-polyfill": "1.0.4",
 "file-loader": "2.0.0",
 "isomorphic-fetch": "2.2.1",
 "less": "3.7.1",
 "less-loader": "4.1.0",
 "mini-css-extract-plugin": "0.4.4",
 "node-noop": "1.0.0",
 "style-loader": "0.18.2",
 "typescript": "3.0.1",
 "url-loader": "0.5.9",
 "webpack": "^4.15.1",
 "webpack-cli": "^3.0.8",
 "webpack-dev-middleware": "^3.1.3",
 "webpack-hot-middleware": "^2.22.2"
 ,
 "dependencies": 
 "@progress/kendo-data-query": "1.4.1",
 "@progress/kendo-drawing": "1.5.7",
 "@progress/kendo-react-buttons": "2.3.1",
 "@progress/kendo-react-dateinputs": "2.3.1",
 "@progress/kendo-react-dialogs": "2.3.1",
 "@progress/kendo-react-dropdowns": "2.3.1",
 "@progress/kendo-react-grid": "2.3.1",
 "@progress/kendo-react-inputs": "2.3.1",
 "@progress/kendo-react-intl": "2.3.1",
 "@progress/kendo-react-layout": "2.3.1",
 "@progress/kendo-react-pdf": "2.3.1",
 "@progress/kendo-react-popup": "2.3.1",
 "@progress/kendo-react-animation": "2.3.1",
 "@progress/kendo-theme-default": "2.60.0",
 "@types/deep-equal": "1.0.1",
 "@types/history": "4.6.0",
 "@types/prop-types": "15.5.6",
 "@types/react": "16.4.2",
 "@types/react-dom": "16.0.7",
 "@types/react-hot-loader": "3.0.3",
 "@types/react-redux": "4.4.45",
 "@types/react-router": "4.0.12",
 "@types/react-router-dom": "4.0.5",
 "@types/react-router-redux": "5.0.3",
 "babel-polyfill": "6.26.0",
 "bootstrap-less-port": "0.3.0",
 "deep-equal": "1.0.1",
 "history": "4.6.3",
 "jquery": "3.3.1",
 "moment": "2.22.2",
 "query-string": "5.1.1",
 "react": "16.4.2",
 "react-appinsights": "1.0.4",
 "react-dom": "16.4.2",
 "react-hot-loader": "3.0.0-beta.7",
 "react-redux": "5.0.5",
 "react-resize-detector": "3.1.1",
 "react-router-dom": "4.3.1",
 "react-router-redux": "5.0.0-alpha.6",
 "redux": "3.7.1",
 "redux-form": "7.4.2",
 "redux-logger": "3.0.6",
 "redux-thunk": "2.2.0",
 "serialize-error": "2.1.0"
 ,
 "scripts": 
 "build-dev": "webpack --config webpack.config.vendor.js --env.environment=development && webpack --config webpack.config.js --env.environment=development",
 "build-prod": "webpack --config webpack.config.vendor.js --env.prod && webpack --config webpack.config.js --env.prod"
 

Tsconfig

 
 "compilerOptions": 
 "baseUrl": "ClientApp",
 "module": "esnext",
 "moduleResolution": "node",
 "target": "es6",
 "jsx": "react",
 "experimentalDecorators": true,
 "sourceMap": true,
 "inlineSources": true,
 "removeComments": true,
 "skipDefaultLibCheck": true,
 "strict": false,
 "lib": [ "es6", "dom" ],
 "noImplicitAny": false,
 "allowSyntheticDefaultImports": true
 ,
 "exclude": [
 "bin",
 "node_modules"
 ]

webpack.config

 const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => 
 if (!env) 
 env = 
 environment: "development"
 ;
 
 const isDevBuild = env && env.environment === "development";

 return [
 stats: modules: false ,
 entry: 'main-client': './ClientApp/boot-client.tsx' ,
 mode: "development",
 resolve: 
 extensions: ['.js', '.jsx', '.ts', '.tsx'],
 modules: [
 './node_modules',
 './ClientApp'
 ]
 ,
 output: 
 path: path.join(__dirname, clientBundleOutputDir),
 filename: '[name].js',
 publicPath: 'dist/'
 ,
 module: 
 rules: [
 test: /.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' ,
 jpg,
 
 test: /.less$/,
 use: [
 loader: 'style-loader' ,
 loader: 'css-loader' ,
 loader: 'less-loader', options: strictMath: true, noIeCompat: true 
 ]
 ,
 woff2
 ]
 ,
 plugins: [
 new CheckerPlugin(),
 new MiniCssExtractPlugin(
 filename: "site.css",
 chunkFilename: "[id].css"
 ),
 new webpack.DllReferencePlugin(
 context: __dirname,
 manifest: require('./wwwroot/dist/vendor-manifest.json')
 ),
 ].concat(isDevBuild ? [
 // Plugins that apply in development builds only
 new webpack.SourceMapDevToolPlugin(
 filename: '[file].map', // Remove this line if you prefer inline source maps
 moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
 )
 ] : [
 ])
 ];
;