webpack4.x 配置下载第三方库,分离js成单个文件引入HTML

依赖webpack打包时，需要引入第三方库的方法有许多，最简单的是直接npm下载并引入（不推荐）

cnpm i jquery -S

import $ from 'jquery'

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

还有一种方式是通过webpack自带的ProvidePlugin这个api引入

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直接引入区别:

• import $…，引入之后，无论你在代码中是否使用jquery，打包后，都会打进去，这样其实产生大量的冗余js
• Provideplugin, 只有你在使用到此库，才会打包

在webpack3.x版本之前：使用new webpack.optimize.CommonsChunkPlugin现在已经不支持
提取第三方库(或者想单独提出来的)js库,增加一个optimization配置,和plugins同级

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

在webpack4.x以后提取第三方库或js单独引入html使用如下方法

// 1.配置入口文件
entry:{
    entry: jsonConfig.entry,
    jquery:'jquery',
    angular:'angular'
}

// 2.下载库
plugins: [
    new Webpack.ProvidePlugin({
        $:'jquery', //下载Jquery
        A:'angular' // 下载Angular
    })
]

// 3.分离单独JS，注意：optimization和Plugins是同级，而不是在Plugins内
optimization:{
    splitChunks:{
        cacheGroups:{ // 单独提取JS文件引入html
            aaa:{ // 键值可以自定义
                chunks:'initial', // 
                name:'jquery', // 入口的entry的key
                enforce:true   // 强制 
            },
            bbb:{
                chunks:'initial',
                name:'angular',
                enforce:true
            }
        }
    }
}