Ndtyjky

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' },

                { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },

                {

                    test: /.less$/,

                    use: [

                        { loader: 'style-loader' },

                        { loader: 'css-loader' },

                        { loader: 'less-loader', options: { strictMath: true, noIeCompat: true } }

                    ]

                },

                {

                    test: /.(woff|woff2|eot|ttf)$/,

                    use: [

                        {

                            loader: 'file-loader',

                            options: {

                                publicPath: ""

                            }

                        }

                    ]

                }

            ]

        },

        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

            })

        ] : [

            ])

    }];

};