Errors cause webpack to not build

766 views Asked by At

I'm using Webpack to compile the front end of a website created in React.

For the development environment, in Windows's cmd.exe I run the yarn dev instruction and the webpack correctly produces the bundles in the /dist folder.

For the production environment, in Windows's cmd.exe I run the yarn production instruction but it does not produce any bundles due to some errors in my .ts files. Is it possible to ignore these errors and complete bundles production?

package.json:

{
  "name": "prtj",
  "version": "1.0.0",
  "description": "",
  "main": "entry.js",
  "scripts": {
    "dev": "webpack --env=development",
    "production": "webpack --env=production"
  },
  "author": "PRG",
  "license": "ISC",
  "dependencies": {
    "i18next": "^14.0.1",
    "moment": "^2.24.0",
    "react": "^16.4.0",
    "react-day-picker": "^7.4.0",
    "react-dom": "^16.4.0",
    "react-i18next": "^9.0.10",
    "react-idle-timer": "^4.2.3",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.85.0"
  },
  "devDependencies": {
    "@types/node": "^10.12.12",
    "@types/react": "^16.7.13",
    "css-loader": "^2.0.0",
    "file-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^2.5.3",
    "url-loader": "^0.5.9",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

webpack.config.js:

const path = require('path');
const config = require('../common/config.js');

const webpackConfig = env => {
    return {
        mode: env === "development" ? "development" : "production",
        entry: ["./src/Index.tsx"],
        output: {
            filename: "tfsBundle.js",
            path: path.join(__dirname, "dist/")
        },
        devtool: env === "development" ? "cheap-eval-source-map" : false,
        resolve: {
            // Add '.ts' and '.tsx' as resolvable extensions.
            extensions: ['.ts', '.tsx', '.js', '.jsx'],
            modules: [
                path.resolve('./node_modules/'),
                path.resolve('./src')
            ]
        },
        module: {
            rules: [
                {
                    test: /\.(jsx|tsx|js|ts)$/,
                    loader: "ts-loader",
                    options: {
                         compilerOptions: {
                            target: env === "development" ? "ES6" : "es5"
                        }
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                    loader: 'url-loader?limit=100000'
                }
            ]
        },
        devServer: {
            host: "localhost",
            contentBase: path.join(__dirname, "dist/")
        },
        externals: {
            'Config': config.getConfig(env),
        }
    }
};
1

There are 1 answers

0
Hassaan Tauqir On BEST ANSWER

You can opt out using transpileOnly for .ts errors.

In your webpack.

{
  test: /\.(tsx|ts)$/,
  loader: "ts-loader",
  options: {
  transpileOnly: true 
  compilerOptions: { target: env === "development" ? "ES6" : "es5" } }
}