Using svg-url-loader for webpack configs that accept svgs

[wuweiweiwu]

Issue: #2474

What I did

Added svg-url-loader to make svg imports smaller

How to test

build core, docs, examples

Is this testable with jest or storyshots?
No
Does this need a new example in the kitchen sink apps?
No
Does this need an update to the documentation?
No
If your answer is yes to any of these, please make sure to include it in your PR.

[Hypnosphi]

Can someone please check that it works on #3148 branch?

[wuweiweiwu]

Sure Ill do that in a bit!

[wuweiweiwu]

@Hypnosphi It worked! :)

except some stuff with webpack 4 that I had to add:

uglifyjs is its own plugin in webpack 4 yarn add -D uglifyjs-webpack-plugin
webpack command is now in its own cli yarn add -D webpack-cli

But other than that It works (I checked out upstream/webpack-4 and manually applied changes from this PR, rebase was getting messy)

[Hypnosphi]

uglifyjs is its own plugin in webpack 4 yarn add -D uglifyjs-webpack-plugin

Actually, it's used as default optimization.minimizer option in webpack 4, so there's no need to depend on it directly

webpack command is now in its own cli yarn add -D webpack-cli

Storybook doesn't use webpack CLI command, only node API

[wuweiweiwu]

@Hypnosphi My mistake. I was directly running yarn build in the vue-kitchen-sink directory.

Is there anything else to be done on this PR?

[wuweiweiwu]

Seems like danger ci has no api token

[codecov]

Codecov Report

Merging #3221 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3221   +/-   ##
=======================================
  Coverage   35.61%   35.61%           
=======================================
  Files         442      442           
  Lines        9777     9777           
  Branches      911      927   +16     
=======================================
  Hits         3482     3482           
+ Misses       5716     5711    -5     
- Partials      579      584    +5

Impacted Files	Coverage Δ
.../core/src/server/config/defaults/webpack.config.js	0% <ø> (ø)	⬆️
app/polymer/src/server/utils.js	0% <0%> (-100%)	⬇️
addons/actions/src/lib/util/typeReplacer.js	54.54% <0%> (ø)	⬆️
lib/core/src/server/config/env.js	0% <0%> (ø)	⬆️
addons/storysource/src/loader/parse-helpers.js	46.75% <0%> (ø)	⬆️
lib/ui/src/modules/ui/libs/filters.js	48.64% <0%> (ø)	⬆️
lib/ui/src/libs/withLifecycleDecorator.js	17.14% <0%> (ø)	⬆️
addons/info/src/components/types/OneOfType.js	60% <0%> (ø)	⬆️
addons/actions/src/lib/types/function/index.js	77.77% <0%> (ø)	⬆️
lib/core/src/client/manager/preview.js	0% <0%> (ø)	⬆️
... and 72 more

---

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 01ebb65...650831f. Read the comment docs.

[Hypnosphi]

Looks like it broke image in polymer example: https://deploy-preview-3221--storybooks-polymer.netlify.com/?selectedKind=Welcome&selectedStory=Welcome&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

[wuweiweiwu]

@Hypnosphi seems that noquotes breaks polymer svg imports. But for others it doesnt. So I've removed it. And docs svg imports (logo) still works!