Webpack changing file in script tag

Question

I'm new to ReactJS and Webpack, I'm using react-boilerplate and I am trying to add a template to the boilerplate which has it's own set of external libraries.

Problem that I'm facing is every time I am trying to include a tag that links to these external libraries, webpack re-compiles these files and changes the content. This is throwing an error.

<!doctype html>
<html lang="en">
<head>
  <!-- The first thing in any HTML file should be the charset -->
  <meta charset="utf-8">
  <!-- Make the page mobile compatible -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Allow installing the app to the homescreen -->
  <link rel="manifest" href="manifest.json">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Avalon</title>
  <script type="text/javascript" src="resources/scripts/core/libraries/jquery.min.js"></script>
</head>
<body>
  <!-- The app hooks into this div -->
  <div id="app"></div>
</body>
</html>

At runtime, if I check the source of jquery.min.js it's content is changed.

I'm not sure what to change in the configuration, or what am I doing wrong.

Why not just import `jquery` in your main js file and attach it to the `window` object if you need it globally? It would be much cleaner than checking in a library with your source — Balázs Édes, Jan 12 '17 at 04:29
for jquery I had thought of that, but there is an entire external bundles folder which I need to import without having it compiled by webpack — Akshay Singh, Jan 12 '17 at 04:32

Thaadikkaaran · Accepted Answer · 2017-01-12T07:13:07.890

To include external libraries as it is with webpack output, the external configuration might help you.

Your custom library might look like,

var jQuery = require("jquery");

function YourLib() {}

// ...

module.exports = YourLib;

Then the config to expose your library would be

{
    output: {
    // export itself to a global var
    libraryTarget: "var",
    // name of the global var: "YourLib"
    library: "YourLib"
},
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

This will not include the jquery library in webpack output but the custom library YourLib would be included in the bundle which requires jQuery which is included as script tag.

will try this, what if the library to be included is a custom library not published as an npm module ? for eg: can we give the path to the file instead of using require in externals ? — Akshay Singh, Jan 12 '17 at 06:40

Webpack changing file in script tag

1 Answers1