feat: more options for Script Tag

README.md

@@ -2,6 +2,9 @@ webpack-imported
 ======
 📝stats-webpack-plugin and 💩webpack-flush-chunks had a baby!
 
+> code splitting, prefetching, and resource management.
+
+WebpackPlugin + ServerSide API + React Components(separate entrypoint)
 
 # Server side API
 ## Webpack plugin
@@ -78,7 +81,9 @@ const tracker = createImportedTracker();// this is optional, only needed if your
 `WebpackImport` has many props:
 - [`preload`=false] - only preloads resources. If preload is set resources would be loaded via network, but not executed. 
 Never use this option for the main chunk.
-- [`async`]=true] - loads scripts with `async` tag, use `deferred` in other case.
+- [`anonymous`=false] - should it be loaded as anonymous 
+- [`async`=true] - loads scripts with `async` attribute, uses `deferred` in other case.
+- [`module`=false] - loads scripts with `module` attribute
 - [`critical-styles`=false] - enabled critical styles handling. No styles would be loaded or prefetched,
 but system will leave extra markup to prevent `MiniCssExtractPlugin` from adding them by itself.
 With this option enabled __you have to call__ `processImportedStyles` after the application starts to load the missing styles. 

src/react/Chunk.tsx

@@ -10,6 +10,8 @@ export interface WebpackImportProps {
   chunks: string | string[];
   prefetch?: boolean;
   anonymous?: boolean;
+  async?: boolean;
+  module?: boolean;
   criticalCSS?: boolean;
   publicPath?: string;
 }
@@ -21,6 +23,8 @@ export const WebpackImport: React.FC<WebpackImportProps> = (
     prefetch,
     criticalCSS,
     anonymous,
+    async = true,
+    module,
     publicPath = stats.config.publicPath
   }) => {
   const tracker = useContext(PrefetchChunkCollectorContext);
@@ -30,7 +34,7 @@ export const WebpackImport: React.FC<WebpackImportProps> = (
     <>
       {
         scripts.load.map(asset => (
-          <LoadScript prefetch={prefetch} href={`${publicPath}${asset}`} anonymous={anonymous}/>
+          <LoadScript prefetch={prefetch} href={`${publicPath}${asset}`} async={async} module={module} anonymous={anonymous}/>
         ))
       }
 

src/react/Prefetch.tsx

@@ -33,12 +33,21 @@ export interface KnownScript {
   prefetch?: boolean;
   anonymous?: boolean;
   async?: boolean;
+  module?: boolean;
 }
 
-export const LoadScript: React.FC<KnownScript> = ({href, prefetch, anonymous, async}) => (
+export const LoadScript: React.FC<KnownScript> = ({href, prefetch, anonymous, async, module}) => (
   <>
     <PrefetchScript href={href} anonymous={anonymous}/>
-    {!prefetch && <script async={!!async} defer={!async} crossOrigin={anonymous && "anonymous"} src={href}/>}
+    {!prefetch && (
+      <script
+        async={!!async}
+        defer={!async}
+        crossOrigin={anonymous && "anonymous"}
+        src={href}
+        type={module ? "module" : undefined}
+      />
+    )}
   </>
 );
 

src/react/index.ts

@@ -1,5 +1,5 @@
 export {createImportedTracker} from "../tracker";
 export {WebpackImportedProvider} from './context';
 export {WebpackImport} from './Chunk';
-export {PrefetchFont, PrefetchScript, PrefetchStyle} from './Prefetch';
+export {PrefetchFont, PrefetchScript, PrefetchStyle, LoadStyle, LoadScript, LoadCriticalStyle} from './Prefetch';
 export {processImportedStyles} from '../css/processImportedStyles'