Support other type of webpack configs

[Ailrun]

Issue: #3780.

What I did

Add interpret package to support other type (.ts, .babel.js, ...) of webpack config files.

How to test

Install ts-node and typescript in official-storybook in example directory, and change webpack.config.js to webpack.config.ts, and finally change requires to imports.

Is this testable with Jest or Chromatic screenshots? No
Does this need a new example in the kitchen sink apps? No
Does this need an update to the documentation? I'm not sure.

[codecov]

Codecov Report

Merging #3785 into master will decrease coverage by 0.31%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #3785      +/-   ##
==========================================
- Coverage   40.98%   40.66%   -0.32%     
==========================================
  Files         453      454       +1     
  Lines        5100     5139      +39     
  Branches      861      872      +11     
==========================================
  Hits         2090     2090              
- Misses       2493     2521      +28     
- Partials      517      528      +11

Impacted Files	Coverage Δ
lib/core/src/server/loadCustomWebpackConfig.js	0% <0%> (ø)
lib/core/src/server/config.js	0% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e3e1d27...230b257. Read the comment docs.

[Ailrun]

@Hypnosphi It looks like the check fails because of yarn registry. Could you rerun it?

[Hypnosphi]

I'm not very comfortable with copy-pasting the code from webpack sources, but it's probably the best we can do now.

Can you please open an issue for https://github.com/webpack/webpack-cli and ask them to make config resolution logic available for external usage? Babel does a similar thing in v7: babel/babel#7472

[Ailrun]

@Hypnosphi the problem is that storybook could accept different type of configurations (even the file names are same with webpack one, storybook takes different function like custom config)

[igor-dv]

Please extract all these to a separate file.

[Ailrun]

OK, I will extract them into webpack_config. Is it what you expect?

[Hypnosphi]

Yes, we only need to resolve the filename

[Ailrun]

@igor-dv Could you check this again?

[igor-dv]

Let's rename webpack_config to the loadCustomWebpackConfig and we are OK.

[Ailrun]

@igor-dv Is there any reason for snake_case file name and camelCase file name? I mean, babel_config use snake_case, where loadCustomWebpackConfig use camelCase.

[igor-dv]

I am not surer about the convention, but it's more about maintenance/readability. I would also change the babel_config to loadBabelConfig because it confuses.

[igor-dv]

Also related to an older issue - #3125.

[nickserv]

I think I found a regression:

info @storybook/react v4.0.0-alpha.21
info
info => Loading presets
WARN => File /Users/nick/Repos/ui/.storybook/webpack.config.ts is detected
WARN    but impossible to import loader for .ts

[87Hz]

I think I found a regression:

info @storybook/react v4.0.0-alpha.21
info
info => Loading presets
WARN => File /Users/nick/Repos/ui/.storybook/webpack.config.ts is detected
WARN    but impossible to import loader for .ts

Do not forget to install @babel/register.

[kristojorg]

@87Hz What do you mean? Why am I installing that and where would I use it?

I'm getting the same error as @nickmccurdy but with .storybook/main.ts

[87Hz]

@87Hz What do you mean? Why am I installing that and where would I use it?

I'm getting the same error as @nickmccurdy but with .storybook/main.ts

That is to ensure .ts files are properly transcompiled by Babel. You do not need to use it anywhere, it is handled by Babel.