經過webpack引入第三方庫

通常來講，引入第三方庫有一下三種狀況：

1. 經過CDN引入；
2. 經過npm 安裝並引入；
3. 第三方js文件就在本地

經過CDN

這是最簡單的一種方式，例如引入高德地圖，能夠直接把如下代碼放在index.html文件底部，這種狀況與webpack無關，由於webpack的入口文件並不在此處

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

npm

經過npm install安裝的包會放在node modules文件夾下，當使用時，能夠直接在用到的文件頂部引入進來，例如import或者require。但若是每一個模塊化的文件都會用到，那麼每一個文件都要去引入這個第三方文件，很繁瑣，這時候就能夠用webpack的插件：ProvidePlugin，能夠理解這個插件的做用就是把第三方庫引入，且它的做用域是全局的。
例如引入jquery

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

那麼就能夠用$和jQuery了，它們兩個都表示jquery，需注意的是$和jQuery後面的值（jquery）必須和npm install jquery中的jquery保持一致，否則會找不到。

本地JS庫文件

會有這麼一種狀況：第三方的js文件就在本地，怎麼經過webpack引入呢？好比第二種jquery的狀況，

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

這樣寫確定會找不到jquery了，由於它並不在node modules中，這時能夠用webpack配置中的resolve選項，給jquery指定一個別名，並配置其路徑。
假如咱們的jquery.js文件放在dist文件夾下面

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

這樣就能夠了。

經過loader

除了ProvidePlugin這個插件，還有一個imports-loader能夠完成引入第三方庫的工做。
test來指定哪一個文件須要引入第三方庫,經過options配置jquery。而後打包後能夠看出，打包後的app.js文件變大了。

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