webpacklibraryprovidePluginexpose-loaderexternals

使用fs.readDirSync多入口文件

webpack 多文件入口打包 函数写得不是很好，之前看过另外一篇，没有找到

library和npm包

• hx-web-core
• dd-form
• editor-lib

主要都是针对第三方的引用，在库里的执行

webpack组织模块打包Library的原理及实现
umd：可以把umd中script引入的全局变量可以当作一个模块一样，这个全局变量export了很对类、函数….

providePlugin和expose-loader

ProvidePlugin或expose-loader
基于 Webpack 引入公共库的几种方式： 暂时不使用DllPlugin
老式jQuery插件为和不能直接用webpack打包？：和上一篇讲的相似，更清楚些

• expose-loader所required添加到全局变量，是在入口文件起作用

webpack库的构建.xmind

externals

• 官方文档

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer’s environment)中的依赖。此功能通常对 library** 开发人员来说是最有用的，然而也会有各种各样的应用程序用到它。
防止将某些 import 的包(package)打包**到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

• 使用webpack externals配置的公共库，还需要告诉用户先引入第三方模块？

看自己在知乎和segmentDefault提的问题
2020-11-18 使用peer dependency?
[译] Node 模块中的 peer dependencies 是什么？

• 深入浅出webpack之externals的使用: 主要看这几张图解，其它描述不是很清楚

    // 这个库被引用时所处的环境下，通过什么变量获取到。
    externals: {
        lodash: {
            commonjs: "lodash", // nodejs环境
            // 浏览器环境。 业务代码中通过const loadash = require('lodash')引入。对应const lodash的那个lodash
            // 库里面是_，引用了业务代码中的lodash
            commonjs2: "lodash", 
            amd: "lodash", // 如果我们的库使用require.js等加载,等价于 define(["lodash"], factory);
            // 如果我们的库在浏览器中使用，需要提供一个全局的变量‘_’。即通过script标签引入lodash，这个全局变量是_
            root: "_" 
        }
    },

demo

我的demo[Github]