grafana/toolkit: Copy or extract static files (#18006)

* Replace webpack ng annotate plugin with babel-plugin-angularjs-annotate

* Copy statics(png/svg) when necessary or keep the original path when files loaded via file-loader

* Update readme

packages/grafana-toolkit/README.md

@@ -84,7 +84,7 @@ Adidtionaly, you can also provide additional Jest config via package.json file.
 
 
 ## Working with CSS & static assets
-We support pure css, SASS and CSS in JS approach (via Emotion). All static assets referenced in your code (i.e. images) should be placed under `src/static` directory and referenced using relative paths.
+We support pure css, SASS and CSS in JS approach (via Emotion).
 
 1. Single css/sass file
 Create your css/sass file and import it in your plugin entry point (typically module.ts):
@@ -101,6 +101,8 @@ If you want to provide different stylesheets for dark/light theme, create `dark.
 
 TODO: add note about loadPluginCss
 
+Note that static files (png, svg, json, html) are all copied to dist directory when the plugin is bundled. Relative paths to those files does not change.
+
 3. Emotion
 Starting from Grafana 6.2 our suggested way of styling plugins is by using [Emotion](https://emotion.sh). It's a css-in-js library that we use internaly at Grafana. The biggest advantage of using Emotion is that you will get access to Grafana Theme variables.
 

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -83,8 +83,8 @@ const getCommonPlugins = (options: WebpackConfigurationOptions) => {
         { from: '../LICENSE', to: '.' },
         { from: 'img/*', to: '.' },
         { from: '**/*.json', to: '.' },
-        // { from: '**/*.svg', to: '.' },
+        { from: '**/*.svg', to: '.' },
-        // { from: '**/*.png', to: '.' },
+        { from: '**/*.png', to: '.' },
         { from: '**/*.html', to: '.' },
       ],
       { logLevel: options.watch ? 'silent' : 'warn' }

packages/grafana-toolkit/src/config/webpack/loaders.ts

@@ -122,8 +122,8 @@ export const getFileLoaders = () => {
           ? {
               loader: 'file-loader',
               options: {
-                outputPath: 'static',
+                outputPath: '/',
-                name: '[name].[hash:8].[ext]',
+                name: '[path][name].[ext]',
               },
             }
           : // When using single css import images are inlined as base64 URIs in the result bundle