build-storybook does not respect webpack.config.js

[jorenbroekema]

Describe the bug I turned off minification in my webpack.config.js, which works for start-storybook. For build-storybook however, this override is not respected.

To Reproduce Steps to reproduce the behavior:

1. Create a basic webpack.config.js, set the following:

   optimization: {
   minimize: false,
   },

2. Run start-storybook, go to browser, inspect element
3. Go to sources, check the files, they are transpiled but not minified
4. Run build-storybook, go into the storybook-static folder, open index.html, check sources, they are minified :(

Expected behavior Non-minified output files after running build-storybook

On a sidenote I am a bit confused why the option is called minimize and not uglify or minify.

[brianzinn]

I have used this and my build output is not minified (5.2.1):

module.exports = async ({ config, mode }) => {
  config.optimization.minimize = false;
}

There is a CLI option to verify your your config (from https://storybook.js.org/docs/configurations/cli-options/). ie: yarn build-storybook --debug-webpack

I am having trouble currently even with minimize=false and setting NODE_ENV in package.json. I have a dependency in vendors~main...bundle that is also in main...bundle and the one in main...bundle is broken :( I will investigate more and perhaps start a new issue, but hopefully that helps you.

[ndelangen]

Hey Brian, I don't have too much to go on for now. Can you please verify that the boolean makes it to the final config?

If it is, than it's a Webpack issue I think.

[brianzinn]

@ndelangen What I can verify is that with the web.config above that I was able to turn off minimize in prod build on 5.2.1.

The other things I mentioned were solved by a custom .babelrc (otherwise imported modules were corrupted). I think this can be closed, but I was hoping @jorenbroekema would reply with his full file to confirm.

[jorenbroekema]

Hey guys thanks for looking into this. I will look into this tomorrow afternoon to see if I can still reproduce this problem with the latest storybook, and if so, post the minimum config I can reproduce it with :).

Oh and I'll use yarn build-storybook --debug-webpack to see if it flags anything, didn't know about this feature ;).

[jorenbroekema]

Alright so I managed to reproduce it with the following config:

module.exports = {
  optimization: {
    minimize: false,
  },
  module: {
    rules: [
      {
        test: [/\.stories\.js$/, /index\.js$/],
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
      {
        test: new RegExp(
          `node_modules(\\/|\\\\)(${['lit-html', 'lit-element', '@open-wc'].join('|')})(.*)\\.js$`,
        ),
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              '@babel/plugin-syntax-dynamic-import',
              '@babel/plugin-proposal-object-rest-spread',
            ],
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'entry',
                  corejs: '2',
                },
              ],
            ],
            babelrc: false,
          },
        },
      },
    ],
  },
};

The debugger (--debug-webpack) spits out two things, a manager webpack config, and a preview webpack config. The optimization: { minimize: false } only makes it to the preview webpack config.

build-storybook still minifies, even though I turn minimize off in optimization. Also, if I turn minimize to "true", and try start-storybook, my output does not get minified as expected. So it's not a build-storybook specific issue from the looks of it, but just in general that the optimization in my config is overridden or not read by webpack?

Am I doing something wrong entirely with this optimization: { minimize ... ? Or perhaps I am misunderstanding what the TerserPlugin --> minimize is supposed to be doing? https://webpack.js.org/configuration/optimization/ this is the source I was using.. Is something else responsible for minification of code in build-storybook, or perhaps in my config?

I'm using @storybook/polymer btw

[brianzinn]

I think that you need to update the config that is passed in. So, your first line should be: module.exports = async ({ config, mode }) => { . and then you can update the config object (ie: config.optimization = ...). The optional mode param let's you know if it's dev/prod.

[ndelangen]

@brianzinn is correct.