如何通过Webpack打包依赖库并全局暴露以适配遗留应用？

完全可行，下面给你几种实操方法，既能用npm/yarn管理依赖，又能让这些库保持全局可用，不用动遗留代码：

方法1：Webpack ProvidePlugin自动注入全局变量 #

这个插件能让Webpack在打包时自动把指定依赖挂载到全局，遗留代码里的$、moment这些变量直接就能用。

修改webpack.config.js：

const webpack = require('webpack');

module.exports = {
  // 其他基础配置（入口、输出等）
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      moment: 'moment',
      _: 'underscore'
    })
  ]
};

方法2：expose-loader显式暴露全局变量 #

如果需要更灵活的全局挂载（比如有些库要挂载到window的特定属性下），可以用expose-loader。

先安装依赖：

npm install expose-loader --save-dev

然后有两种配置方式：

方式A：在webpack.config.js里配置规则 #

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: { exposes: ['$', 'jQuery'] }
      },
      {
        test: require.resolve('moment'),
        loader: 'expose-loader',
        options: { exposes: 'moment' }
      },
      {
        test: require.resolve('underscore'),
        loader: 'expose-loader',
        options: { exposes: '_' }
      }
    ]
  }
};

方式B：在入口文件直接引入 #

// 入口文件头部添加
import 'expose-loader?$!expose-loader?jQuery!jquery';
import 'expose-loader?moment!moment';
import 'expose-loader?_!underscore';

方法3：自定义全局依赖打包脚本（你提到的dependencies.js方案） #

这种方式可以单独打包一个依赖脚本，页面里先加载它，再跑遗留代码。

1. 新建src/dependencies.js：

// 把依赖挂载到window对象上
window.$ = window.jQuery = require('jquery');
window.moment = require('moment');
window._ = require('underscore');
// 其他依赖照此格式添加

2. 修改webpack.config.js，把这个文件作为单独入口打包：

module.exports = {
  entry: {
    dependencies: './src/dependencies.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

3. 打包后，在HTML里按顺序加载：

<script src="./dist/dependencies.bundle.js"></script>
<!-- 你的遗留应用脚本 -->
<script src="./legacy-app.js"></script>

额外提示 #

• 直接用npm/yarn安装依赖：npm install jquery moment underscore，代码仓库里就不用再存这些库的文件了，版本更新直接改package.json就行。
• 虽然全局变量是反模式，但这种过渡方案能帮你先完成包管理迁移，后续有资源再逐步重构代码，移除全局依赖。

内容的提问来源于stack exchange，提问作者JasonX