How load or add minified third party libraries into webpack application?

Viewed 244

I have a lot of old libraries which I need to include them in my javascript application, but I have several errors due to webpack.

I reproduce the error with:

#1

If I add the minified version <script src="jquery-3.5.1.min.js"/> into index.html I get this error:

WARNING in ./src/jquery-3.5.1.min.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/tmp/workspacew/webpack-starter/src/jquery-3.5.1.min.js
  2:218    error  Missing semicolon  semi
  2:224    error  Missing semicolon  semi
  2:377    error  Missing semicolon  semi
  2:418    error  Missing semicolon  semi
  2:582    error  Missing semicolon  semi
  <a lot of similar lines>

@ ./src/index.html 3:33-65
@ ./src/scripts/index.js

ERROR in   Error: webpack-internal:///./src/jquery-3.5.1.min.js:116
E = C.document,
     ^
TypeError: Cannot read property 'document' of undefined

- jquery-3.5.1.min.js:116 eval
webpack-internal:///./src/jquery-3.5.1.min.js:116:13

#2

If I add the uncompressed version <script src="jquery-3.5.1.js"/> into index.html I have a similar error (without Missing semicolon error lines):

ERROR in   Error: webpack-internal:///./src/jquery-3.5.1.js:154
var document = window.document;
                      ^
TypeError: Cannot read property 'document' of undefined

#3

If I add import '../jquery-3.5.1.min.js'; in my entry index.js, I get the same error lines with: Missing semicolon.

#4

If I add import '../jquery-3.5.1.js'; in my entry index.js, jquery is correctly loaded. But this is not my case because my files are already minified.

My question is

How can I use third party libraries (not as npm modules) already minified in a simple way like:

<script src="jquery-3.5.1.min.js"/>

Must I manually load them in my index.js ?

Research, Attempts, Workarounds

  • webpack-merge-and-include-globally
  • Host minified files in another server and using

<script src="htt://another.host.com/jquery-3.5.1.min.js"/>, works!

0 Answers
Related