Webpack中如何导入非ES/CJS/AMD等模块格式的第三方库？

这种直接暴露全局变量的库确实是Webpack默认处理流程之外的情况，我来给你讲几种实用的解决办法：

方法1：手动封装成ES模块（最简单直观） #

如果这个库文件是你本地项目里的，最直接的方式是自己写个小封装文件，把全局变量转成模块导出：

1. 先把你的libObj文件放在项目里，比如src/vendor/libObj.js，内容就是：

var libObj = { a: "a", getAddress: function() { return null; } }

2. 创建一个封装文件src/vendor/wrapLibObj.js：

// 先加载原库，让它在全局环境生成libObj
require('./libObj.js');
// 把全局变量导出成ES模块
export default window.libObj;

3. 然后在main.js里直接用import导入：

import libObj from './vendor/wrapLibObj.js';

console.log(libObj.a); // 正常使用

方法2：用Webpack的ProvidePlugin自动注入 #

如果你不想每次都手动导入，想用Webpack自动帮你把全局变量映射成可用的模块，可以用ProvidePlugin：

在你的webpack.config.js里配置：

const webpack = require('webpack');

module.exports = {
  // ...其他配置（entry、output之类的）
  plugins: [
    new webpack.ProvidePlugin({
      // 这里的键是你要在代码里用的变量名，值是全局变量的来源
      libObj: ['./src/vendor/libObj.js', 'default']
      // 如果是已经通过script标签挂在window上的全局变量，改成：
      // libObj: 'window.libObj'
    })
  ]
}

配置好之后，在main.js里不需要手动import，直接用libObj就行：

console.log(libObj.getAddress()); // 直接使用

方法3：用imports-loader转换全局变量为模块 #

imports-loader是Webpack的官方 loader，专门用来处理这种非模块格式的代码，把全局变量转换成可导入的模块：

1. 先安装loader：

npm install imports-loader --save-dev

2. 在webpack.config.js里添加规则：

module.exports = {
  module: {
    rules: [
      {
        // 匹配你的libObj文件路径
        test: require.resolve('./src/vendor/libObj.js'),
        use: {
          loader: 'imports-loader',
          options: {
            // 把代码包裹在window环境里，确保全局变量能挂载
            wrapper: 'window',
            // 指定要导出的全局变量名
            exports: 'libObj'
          }
        }
      }
    ]
  }
}

3. 然后在main.js里直接import：

import libObj from './src/vendor/libObj.js';

libObj.a; // 正常访问

方法4：处理CDN引入的全局库 #

如果这个库是你通过HTML的<script>标签从CDN引入的（比如<script src="https://example.com/libObj.js"></script>），你需要告诉Webpack这个变量是外部全局变量，不要打包进去：

在webpack.config.js里配置externals：

module.exports = {
  externals: {
    // 键是你import时用的模块名，值是全局变量名
    libObj: 'libObj'
    // 如果全局变量挂在window上，也可以写成：
    // libObj: 'window.libObj'
  }
}

然后在main.js里正常import：

import libObj from 'libObj';

console.log(libObj.a);

这些方法里，手动封装适合小项目或者简单场景，ProvidePlugin适合需要全局随处可用的情况，imports-loader更灵活，而externals专门处理CDN资源。你可以根据自己的项目情况选最合适的~

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