Upgrade from Webpack 2 to Webpack 4 - How to build with errors

Question

I have a super old project and I want to upgrade it from Webpack 2 to Webpack 4. Even with Webpack 2, when doing npm run build I was getting build errors but they did not prevent me to generate build outputs in the \dist folder.

As soon as I moved to Webpack 4, I continued seeing the same build errors, but the built outputs are not populated anymore. The errors that I am getting are errors I don't want to really fix, I simply want to have Webpack 4 to produce some outputs.

Here is my package.json dependencies:

"devDependencies": {
    "@types/prop-types": "^15.7.2",
    "@types/react": "^15.6.27",
    "@types/react-dom": "^15.5.10",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^5.0.1",
    "file-loader": "^0.11.1",
    "fs": "0.0.1-security",
    "jasmine-core": "^2.99.1",
    "jquery": "^3.5.1",
    "prop-types": "^15.7.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.1.1",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-middleware": "^0.1.21",
    "redux-thunk": "^2.3.0",
    "resolve-url-loader": "^2.3.2",
    "semantic-ui-react": "^0.77.1",
    "source-map-loader": "^0.2.4",
    "typescript": "^4.1.3",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  },

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "jsx": "react",
    "outDir": "./dist",
    "lib": [
        "dom",
        "es5",
        "es2015",
        "es2015.promise"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

and my module.exports under webpack.config.js

module.exports = {
    context: projectBaseDir,

    devtool: 'source-map',

    entry: {
        'LoadingApi.web': ['src/loading/loading.js', 'Old/loading.ts'],
    },

    output: {
        path: path.resolve('./dist'),
        filename: '[name].js',
        sourceMapFilename: '[name].map'
    },

    resolve: {
        extensions: ['.css', '.scss', '.ts', '.tsx', '.js', '.jsx'],
        modules: [
            path.resolve('./Javascript'),
            nodePath
        ]
    },

    module: {
        rules: [
            {
                enforce: 'post',
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader",
                options: {
                    failonError: false,
                },
                exclude: /node_modules/
            },

            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader",
                options: {
                    failonError: false,
                },
                exclude: /node_modules/
            }
        ]
    }
}

I am trying to figure out what do I need to tweak with Webpack 4 in order to have output files as I used to with Webpack 2.

Answer 1

I'm not sure what exactly is causing this problem, but what I notice is that the awesome-typescript-loader that you are using is not maintained anymore and claims to only support Webpack 2.

For an up-to-date setup, better use ts-loader (or alternatively babel-loader with preset-typescript). If you want it to build despite type errors, use the transpileOnly option. If you want errors to be emitted anyways but not cause the build to fail, additionally use fork-ts-checker-webpack-plugin.