A brief analysis of how to introduce third-party libraries through webpack

This article introduces to you a brief analysis of how to introduce third-party libraries through webpack. It has certain reference value. Friends in need can refer to it.

Generally speaking, there are three situations when introducing third-party libraries:

1. Introduced through CDN;

2. Through npm Install and introduce;

3. The third-party js file is local

Through CDN

This is the simplest one For example, if you introduce Amap, you can directly put the following code at the bottom of the index.html file. This situation has nothing to do with webpack, because the entry file of webpack is not here

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

npm

Packages installed through npm install will be placed in the node modules folder. When used, they can be introduced directly at the top of the file used, such as import or require. But if every modular file is used, then each file must introduce this third-party file, which is very cumbersome. At this time, you can use the webpack plug-in: ProvidePlugin. It can be understood that the function of this plug-in is to integrate the third-party library is introduced, and its scope is global.
For example, if you introduce jquery

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

, you can use $ and jQuery. Both of them represent jquery. It should be noted that the value (jquery) after $ and jQuery must be the same as jquery in npm install jquery. Be consistent or you won't find it.

Local JS library file

There will be a situation: the third-party js file is local, how to introduce it through webpack? For example, in the second case of jquery, if

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

is written like this, jquery will definitely not be found because it is not in the node modules. In this case, you can use the resolve option in the webpack configuration to specify an alias for jquery. and configure its path.
If our jquery.js file is placed under the dist folder

resolve:{
    alias: {
      $: path.resolve(__dirname, './dist/jquery.js'),
      jQuery: path.resolve(__dirname, './dist/jquery.js'),
    }
}

That’s it.

Through loader

In addition to the ProvidePlugin plug-in, there is also an imports-loader that can complete the work of introducing third-party libraries.
test to specify which file needs to introduce a third-party library and configure jquery through options. Then after packaging, you can see that the packaged app.js file becomes larger.

module: {
        rules: [
            {
                test: path.resolve(__dirname, "./src/app.js"),
                use: "imports-loader"
                options:{
                    $:'jquery'
                }
            }
        ]
    }

Related recommendations:

Detailed explanation of webpack4.0 configuration

##For config/index in vue .js: Detailed explanation of configuration

The above is the detailed content of A brief analysis of how to introduce third-party libraries through webpack. For more information, please follow other related articles on the PHP Chinese website!