Webpack.js.org: Typescript + Tree shaking configuration

[dmitriid]

Relevant page: https://webpack.js.org/guides/webpack-and-typescript/

If I understand this correctly, this setup will not trigger webpack's tree shaking algorithm, because the loader will produce a CommonJS-stye require, not static imports required by tree shaking.

If I'm correct, something like this should be used for tree shaking:

---

1. npm install babel-core babel-preset-es2015
2. Add .babelrc with

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ]
}

1. tsconfig.json should be set to es6

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true
  }
}

If TS compiler complain about modules not being found, try adding "moduleResolution": "node" to "compilerOptions".

1. webpack.config should invoke both loaders:

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

(Note, loaders should be replaced by use)

[skipjack]

@webpack/documentation-team can anyone familiar with typescript environments confirm this?

@dmitriid maybe we add a note or warning regarding typescript in the main tree-shaking guide, and change the example in the webpack and typescript guide if your proposed solution is confirmed?

[bebraw]

Yeah, if you lose ES6 module definitions, there's no way tree shaking can work. That's correct.

[skipjack]

Ok great, @dmitriid would you be interested in pr-ing these changes?

[dmitriid]

@skipjack

I'll try to do this today

[dmitriid]

As usual, life interfered :) And it only took me 5 days :)

[slashhuang]

@skipjack came across the same problem, hope @dmitriid's merge request solved this tree shaking issue for ts project using webpack

[JounQin]

What about working with webpack.config.ts?
It seems that it will throw an error about import syntax in webpack.config.ts if module is es6 in tsconfig.json.

[geirsagberg]

@JounQin yeah you have to use node-style requires if you have module set to es6 or es2015. No way around it as long as your webpack.config.ts is using the same tsconfig.json as your app code.

[JounQin]

@geirsagberg I found a workaroud: move tsconfig.json into my src folder rather than cwd directly. That works for me😃.

[dmitriid]

For anyone still watching this issue, the config I provided no longer works. I have no idea what's broken and how to fix it, but you will end up with error TS2307: Cannot find module 'react'.

UPD: "moduleResolution": "node". I've updated the original post.

[kadishmal]

The link at the top is broken. The new link is https://webpack.js.org/guides/typescript/.

[Crisfole]

This content is no longer present on the Webpack.js website. Is it out of date, or just accidentally dropped?

[dmitriid]

@Crisfole It's quite possible that the current setup instructions (including those on TS site) are enough. Can't verify this, unfortunately, as I no longer have a TypeScript setup

[MadhuvanthG]

This content is no longer present on the Webpack.js website. Is it out of date, or just accidentally dropped?

I'm too late, but might help someone landing here. I think, the page has just been modified a bit over time. This I believe, is the page you're looking for.
https://webpack.js.org/guides/typescript/#basic-setup