title: Webpack: transpiling of assets transferred to dist directory using copy-webpack-plugin
body: <p>I am integrating an SPA built predominantly using d3.js into Webpack. I'm transpiling with Babel, and using the latest versions of everything..</p>
  
  <p>Before integration, d3.js allowed me (event-driven) to inject scripts dynamically, entirely reusably, recursively and hence effortlessly into the served-up html file. The only thing I had to provide were the foundational JSON files.</p>
  
  <p>For example (just for info, not critical to understanding the question), for a menu-building javascript file:</p>
  
  <pre><code>case "js":
    files_to_attach
    .insert("script") // --&gt; inject into html file
    .attr("src", function() {
      return "frontend/" + filetype + "/" + menu_group + "/" + menu + "/" + filename + "." + filetype;
    })
    .attr("type", "text/javascript") // Also tried using type "module" here
    .attr("class", menu)
    .attr("id", menu_item);
  break;
  </code></pre>
  
  <p>This approach was used across all loaded assets.</p>
  
  <p>Webpack has it's own mechanisms for dynamic loading, but I chose (by importing all external scripts, then selecting, on-demand, from their assigned constant names) to stick with the above, again direct-injecting them into the dist/index.html file.</p>
  
  <p>I did this so that these loading actions can, in the future, be easily converted to database calls.</p>
  
  <p>To allow all this to happen, I had to transfer the scripts en bloc <em>from</em> the frontend (normally 'src') <em>to</em> the dist directory using the 'copy-webpack-plugin'.</p>
  
  <p>This differs from the <a href="https://webpack.js.org/guides/lazy-loading/" rel="nofollow noreferrer">prescribed Webpack lazy loading</a> approach in that these scripts are external to, rather than an integral part of, index.js.</p>
  
  <p>The problem? These files still contain the untranspiled import statements, provoking the following:</p>
  
  <pre><code>SyntaxError: import declarations may only appear at top level of a module
  </code></pre>
  
  <p>These import statements lie, needless to say, at the head of each module.</p>
  
  <p><strong>The question, then, is:</strong></p>
  
  <p>Given the scripts are correctly injected into the final html, how do I ensure they are also (pre- or post-) transpiled?</p>
  
  <p>The configuration is simple and the question a general one, so to show more code seems superfluous. I imagine there may be a few approaches to this.</p>
  
  <p><strong>SUMMARY THUS FAR</strong></p>
  
  <p>Webpack ruthlessly blocks all attempts at non-'import'-or-'require'-style file system access, but neither import nor require can return a direct reference to a file (as opposed to the file's contents). So import statements (which <strong>do</strong> lead to transpiling) cannot be leveraged to inject a script to HTML. </p>
  
  <p>Script injections using libraries such as d3.js are simply left un-transpiled. Is there some means of 'force'-transpiling them?</p>
  
  <p>The only documented means of script injection is <strong>effectively</strong> static, using multiple entry points. Furthermore, no plugin seems to exist that can assist with dynamic script injection. (The nearest I've found to a solution is inject-html-webpack-plugin, but the plugin's documentation is brutally terse, with no example of so-called 'transducer' use).</p>
  
  <p>Truly dynamic, transpiled script injection into HTML seems blocked on all fronts.</p>
  
  <p>No files copied using copy-webpack-plugin are transpiled, but do I see mention <a href="https://stackoverflow.com/questions/56093213/transpiling-and-linting-files-outside-of-my-root-directory-webpack-4?rq=1">here</a> of a tortuous workaround ("copy the files from the src files into the module, process them and then move the generated/processed files").</p>