I want to use TypeScript modules and bundle them via Webpack. Here are my config files:

webpack.config.js:

const path = require('path');

module.exports = () => {
    return {
        entry: './index.ts',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [{
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }],
        },
    };
};

tsconfig.json:

{
  "pilerOptions": {
    "module": "monjs",
    "target": "es3"
  },
  "include": ["./**/*"],
  "exclude": ["node_modules/**/*", "webpack.config.js"]
}

Maybe I got something wrong from the documentation. The aim was to generate code in ES5 (or even earlier). But here is my bundled file:

(()=>{var n=function(n,o){console.warn(o)};n(0,0),n(0,1)})();

It has an arrow function, which was added in ES6. I am confused. How can I get rid of that?

EDIT:

Here's the code I try to pile:

const func = (foo, bar: number) => {
    console.warn(bar);
};

func(0, 0);
func(2, 1);

EDIT 2:

Also, I run the pilation process in production mode. (idk, maybe that's useful information)

I want to use TypeScript modules and bundle them via Webpack. Here are my config files:

webpack.config.js:

const path = require('path');

module.exports = () => {
    return {
        entry: './index.ts',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [{
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }],
        },
    };
};

tsconfig.json:

{
  "pilerOptions": {
    "module": "monjs",
    "target": "es3"
  },
  "include": ["./**/*"],
  "exclude": ["node_modules/**/*", "webpack.config.js"]
}

Maybe I got something wrong from the documentation. The aim was to generate code in ES5 (or even earlier). But here is my bundled file:

(()=>{var n=function(n,o){console.warn(o)};n(0,0),n(0,1)})();

It has an arrow function, which was added in ES6. I am confused. How can I get rid of that?

EDIT:

Here's the code I try to pile:

const func = (foo, bar: number) => {
    console.warn(bar);
};

func(0, 0);
func(2, 1);

EDIT 2:

Also, I run the pilation process in production mode. (idk, maybe that's useful information)

• javascript
• typescript
• webpack
• ecma

• Yes, that's exactly I want to have. But I can't understand what am I doing wrong. I added the code – Ivan Adanenko Commented Oct 31, 2020 at 13:01
• did you set target to es5 as described in webpack.config webpack.js/migrate/5 – duc mai Commented Oct 31, 2020 at 20:57

2 Answers 2

Simply add target: ['web', 'es5'] to your webpack configuration. (In addition to changing the .tsconfig.) For the full list of accepted values, see the docs.

You could also set target: 'es5', but in this case, there are some problems. At least in my case without specifying 'web' TerserWebpackPlugin refused to press files in the production mode.

That's the problem I faced last week after upgrading the webpack to version 5.

By default, it's bundling it as ES6. In your webpack configuration, configuring output.environment should resolve the problem.

Edit: webpack only change it's internal usages with these configurations.

webpack.js/configuration/output/#outputenvironment

It does not pile the modules. For the module pilation, babel should be used.