How to introduce a third party library through WebPack

In general, there are three cases introduced in the third party:

  1. introduced by CDN;
  2. Installing and introduced by npm;
  3. third party The JS file is in the local


This is the easiest way, such as introducing a Gaode map, can directly put the following The code is placed at the bottom of the index.html file, which is not related to WebPack because WebPack’s entry file is not here

     
NPM

The package installed by npm install will be placed under the Node Modules folder. When used, it can be used directly. The top of the file is introduced into, such as import or require. But if each modular file is used, then each file must introduce this third party file, which is very cumbersome, you can use WebPack’s plug-in: ProvidePlugin, you can understand this plugin’s role is to put third-party libraries Introduced, and its scope is global.
, for example, introduced jQuery


New WebPack.ProvidePlugin ({$: ‘jQuery’, jQuery: ‘jQuery’})

 Then you can use $ and jQuery, both represent jQuery, you need to pay attention to the value of $ and jQuery (jQuery) must be consistent with jQuery in NPM Install jQuery Otherwise, you can't find it.   
Local JS library file

there will be such a feelingStatus: Third-party js file on the local, how webpack by introducing it? Jquery the case of the second example,


new webpack.ProvidePlugin ({$: ‘jquery’, jQuery: ‘jquery’})

 write will certainly not find jquery, because it is not in the node modules in, then you can use webpack resolve configuration options, jquery to specify an alias and configure its path.   
If our jquery.js following files in the folder dist


resolve: {alias: {$: path.resolve (__ dirname , ‘./dist/jquery.js’), jQuery: path.resolve (__ dirname, ‘./dist/jquery.js’),}}

 This it.   
by Loader

In addition to this plug ProvidePlugin, there is a imports-loader can do the work of third-party libraries.

test to specify which files need third-party libraries, configuration options through jquery. Then after packaging can be seen, app.js file package larger.


module: {rules: [{test: path.resolve (__ dirname, “./src/app.js”), use: “iMports-loader “options: {$: ‘jQuery’}}]}

The above is all the contents of this article, I hope that everyone will help, I hope everyone A lot of support TUMI clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment