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

最新推荐文章于 2022-08-03 16:03:33 发布

sunq1982

最新推荐文章于 2022-08-03 16:03:33 发布

阅读量2.3k

点赞数

分类专栏： javascript node-js webpack 文章标签： javascript node.js webpack npm 前端

本文链接：https://blog.csdn.net/sunq1982/article/details/105953581

版权

本文介绍了在Webpack4中两种加载第三方模块的方法：使用ProvidePlugin和DllPlugin。ProvidePlugin可以将模块转化为全局变量，简化入口文件的引用。DllPlugin则用于创建动态链接库，减少重复打包，提高构建速度。文章详细阐述了这两种方法的配置和使用，并对DllPlugin的四个关键点进行了讲解。

摘要由CSDN通过智能技术生成

第一种方法

这种方法比较简单。就是用 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",

最低0.47元/天解锁文章