webpack 加载第三方js库（这里以jquery为例）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hjh15827475896/article/details/86298085

当webpack使用第三方库的时候

可以使用 webpack.providePlugin插件

有三种方式

1. 直接在html文件中引入 cdn上的文件  （注意这种方式是引用网络上的 CDN 文件）

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>.js

在html文件中引入了之后，就可以在入口文件（app.js）中，使用 $(function(){})  了

2. 使用 npm 安装上jquery,然后 使用 webpakc.providePlugin插件

     方法如下 

        npm install jquery --save;  (这里的jquery是要在项目中运行的，所以要用 --save   而不能用  --save-dev)

        安装了 jquery后，webpack.config.js配置如下

path

module.exports = {
    entry:{
        app:"./src/app.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.[hash:5].js"
    },
    module:{
        rules:[
            {
                test:...
                use:[
                    {
                        loader:......
                        options:{
                            .......
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            $:"jquery",    //这里的意思是就把 $ 注入模块中 ， 而后面的jquery 就是 npm 命令行中的 jquery模块
        })
    ]

}

 配置好后，就可以在 项目中使用 $(function(){})了

3.当第三方库是自已开发的，不在 CDN上，也没有npm可以用来安装的时候，就没有办法用以上两种情况来加载了

这时就要使用   webpack.config.js 的  resolve配置了，还以 jquery 为例，  我们把 jquery.min.js下载到本地，存放在

src/lib/jquery.min.js

首先：下载网上的 jquery.min.js源码

然后 配置 webpack.config.js 

let webpack  = require("webpack");
let path = require("path");

module.exports = {
    .......

    resolve:{
        alias:{
            jquery$:path.resolve(__dirname,"./src/lib/jquery.min.js")
        }
    }
    // resolve alias的作用是装 jquery的模块指向本地文件 ./src/lib/jquery.min.js

    plugins:[
        new webpack.ProvidePlugin({
            $:"jquery"     
        }),   //这里是数组中的数据，所以要使用 “，”
    ]
}

这样也可以在app.js中使用 $(function(){})