使用第三庫: 

1. 直接npm下載，然後引入（完全可以使用，但是我個人不是很推薦）

    cnpm i jquery -S

    import $ from 'jquery'

    $(xxxx).on()
    $(xxx).css()

1. ProvidePlugin (個人推薦此方式)

   const webpack = require('webpack');
   
   在plugins裡面使用:
   
   plugins:[
       new Webpack.HotModuleReplacementPlugin(),
       new HtmlWebpackPlugin({
           title:'Hello World',
           template: './src/index.html' //模板地址
       }),
    
       new Webpack.ProvidePlugin({ //下載Jquery庫
           $:'jquery'
       })
   ]
   

通過ProvidePlugin和 import直接引入區別:

1. import $...，引入之後，無論你在程式碼中是否使用jquery，打包後，都會打進去，這樣其實產生大量的冗餘js
2. Provideplugin, 只有你在使用到此庫，才會打包

提取第三方庫(或者想單獨提出來的)js庫,增加一個optimization配置,和plugins同級

在webpack3.x版本之前：使用new webpack.optimize.CommonsChunkPlugin現在已經不支援

new webpack.optimize.CommonsChunkPlugin({
        name:'jquery'
})
 

-

在webpack4.x以後提取第三方庫或js單獨引入html使用如下方法

1.配置入口檔案

entry:{
    entry: jsonConfig.entry,
    jquery:'jquery',
    angular:'angular'
},

2.下載庫

plugins:[
    // Uglify是壓縮js,現在已經不需要了,只需要在script裡面寫成
    // "build": "webpack --mode production", 就自動壓縮額
    //new Uglify(),  
    new Webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        title:'Hello World',
        template: './src/index.html' //模板地址
    }),
    new ExtractTextPlugin('css/index.css'), //都提到dist目錄下的css目錄中,檔名是index.css裡面
    new PurifyCssWebpack({ //消除冗餘程式碼
        // 首先保證找路徑不是非同步的,所以這裡用同步的方法
        // path.join()也是path裡面的方法,主要用來合併路徑的
        // 'src/*.html' 表示掃描每個html的css
        paths:glob.sync(path.join(__dirname,'src/*.html')) 

    }),
    new CopyWebpackPlugin([ //支援輸入一個數組
        {
            from: path.resolve(__dirname, 'src/assets'), //將src/assets下的檔案
            to: './public' // 複製到publiv
        }
    ]),
 
    new Webpack.ProvidePlugin({
        $:'jquery', //下載Jquery
        A:'angular' // 下載Angular
    })
],

3.分離單獨JS，注意：optimization和Plugins是同級，而不是在Plugins內

plugins:[
    // Uglify是壓縮js,現在已經不需要了,只需要在script裡面寫成
    // "build": "webpack --mode production", 就自動壓縮額
    //new Uglify(),  
    new Webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        title:'Hello World',
        template: './src/index.html' //模板地址
    }),
    new ExtractTextPlugin('css/index.css'), //都提到dist目錄下的css目錄中,檔名是index.css裡面
    new PurifyCssWebpack({ //消除冗餘程式碼
        // 首先保證找路徑不是非同步的,所以這裡用同步的方法
        // path.join()也是path裡面的方法,主要用來合併路徑的
        // 'src/*.html' 表示掃描每個html的css
        paths:glob.sync(path.join(__dirname,'src/*.html')) 

    }),
    new CopyWebpackPlugin([ //支援輸入一個數組
        {
            from: path.resolve(__dirname, 'src/assets'), //將src/assets下的檔案
            to: './public' // 複製到publiv
        }
    ]),
    new Webpack.ProvidePlugin({
        $:'jquery',
        A:'angular'
    })
],
optimization:{
    splitChunks:{
        cacheGroups:{ // 單獨提取JS檔案引入html
            aaa:{ // 鍵值可以自定義
                chunks:'initial', // 
                name:'jquery', // 入口的entry的key
                enforce:true   // 強制 
            },
            bbb:{
                chunks:'initial',
                name:'angular',
                enforce:true
            }
        }
    }
}