Webpack 在 ES5 中生成箭頭函數

Question

我想使用 TypeScript 模塊並通過 Webpack 捆綁它們。 這是我的配置文件：

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：

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

也許我從文檔中弄錯了。 目的是在 ES5（甚至更早版本）中生成代碼。 但這是我的捆綁文件：

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

它有一個箭頭函數，這是在 ES6 中添加的。 我很迷惑。 我怎樣才能擺脫它？

---

編輯：

這是我嘗試編譯的代碼：

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

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

編輯2：

另外，我在生產模式下運行編譯過程。 （idk，也許這是有用的信息）

Answer 1

決定只是將target: ['web', 'es5']到您的 webpack 配置中。

您也可以設置target: 'es5' ，但在這種情況下，存在一些問題。 至少在我沒有指定“web”的情況下，TerserWebpackPlugin 拒絕在生產模式下壓縮文件。

Answer 2

這就是我上周將 webpack 升級到版本 5 后面臨的問題。

默認情況下，它將它捆綁為 ES6。 在您的 webpack 配置中，配置output.environment應該可以解決問題。

編輯：webpack 僅使用這些配置更改其內部用法。

webpack.js.org/configuration/output/#outputenvironment

它不編譯模塊。 對於模塊編譯，應該使用 babel。