Webpack4两种加载第三方模块的方法:ProvidePlugin和 DllPlugin

第一种方法

这种方法比较简单。就是用 webpack.ProvidePlugin 这个插件

plugins: [
         new webpack.ProvidePlugin({
   
             $:'fitflex',
             watchInDepth:'watch-in-depth'
         }),
        }),  
    ],

'fitflex' 和'watch-in-depth 是我写的两个npm 包， 在node_modules 里面， 这样我们可以将其转化为两个全局变量 $ 和 watchInDepth

这两个全局变量可以直接在入口文件index.js 里面使用，不需要import,也不需要require

第二种方法

就是用webpack.DllPlugin 和 webpack.DllReferencePlugin。
为什么我们要用一种比较麻烦的方法呢？ 如果你用的框架比较大，代码量比较多，那么你不想在打包编译的时候一直带上它们，而只想打包一次。这里借用了微软的DLL概念，就是所谓的动态链接库（dynamic link library)。
第一步：需要给第三方框架打包

webpack.dll.config.js

npm run build --config webpack.dll.config.js

const webpack = require('webpack');
const path = require('path');
module.exports ={
   
    resolve:{
   
        extensions: [".js", ".jsx"]
    },
    entry: {
   
       myDll:['fitflex', 'watch-in-depth']
    },
    output: {
   
        filename:'[name].dll.js',
        path: path.join(__dirname, "dist",