Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build-storybook does not respect webpack.config.js #8062

Closed
jorenbroekema opened this issue Sep 12, 2019 · 7 comments
Closed

build-storybook does not respect webpack.config.js #8062

jorenbroekema opened this issue Sep 12, 2019 · 7 comments

Comments

@jorenbroekema
Copy link

jorenbroekema commented Sep 12, 2019

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,
},
  1. Run start-storybook, go to browser, inspect element
  2. Go to sources, check the files, they are transpiled but not minified
  3. 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
Copy link

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
Copy link
Member

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
Copy link

@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
Copy link
Author

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
Copy link
Author

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
Copy link

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
Copy link
Member

@brianzinn is correct.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants