How to set Babel targets with Webpack?

17 views Asked by At

I'm working on a TS library that's meant to be used on browsers. It has a dependency on the latest marked, which does not work on my Safari 10.14.5. I noticed that if I ran my bundle.js manually in Babel's playground using the targets defaults, not ie 11, not ie_mob 11, then the reworked bundle actually works on my Safari.

Therefore, I decided to integrate Babel loader into my Webpack config to generate the bundle. Here are my files:

webpack.config.js

var path = require("path");

module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        libraryTarget: "window",
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"],
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
        ],
    },
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-typescript"],
    "plugins": ["@babel/plugin-proposal-class-properties"],
    "targets": "defaults, not ie 11, not ie_mob 11"
}

In my package.json scripts, I have the following:

{
  ...
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
  ...
}

Now if I run npm run build, unfortunately, the bundle that gets created using Webpack does not work on my Safari, even though as I mentioned before, manually running it through the REPL makes it work. So what gives? Do I have a wrong or missing setting somewhere?

0

There are 0 answers