如何让外部库在Webpack中正常工作？Externals配置求助

Hey there! Let's dig into your Webpack externals issue—this is super common when versions shift, so I totally get the frustration. Your old config probably worked by accident in an older Webpack version, but newer releases enforce stricter rules. Let's fix this properly:

1. Core Logic First #

Externals tells Webpack: "This module is already loaded externally (via CDN/global variable)—don’t bundle it, just use the global version." The key is matching the module name you import with the global variable name of the library.

2. Browser Environment Config (Your Likely Use Case) #

For Webpack 4 and Below #

Keep it simple—map your imported module names directly to their global counterparts:

// webpack.config.js
module.exports = {
  // ...other configs
  externals: {
    jquery: 'jQuery', // import 'jquery' → uses global window.jQuery
    d3: 'd3', // import 'd3' → uses global window.d3
    lodash: '_', // import 'lodash' → uses global window._
    moment: 'moment' // import 'moment' → uses global window.moment
  }
};

For Webpack 5 (More Strict & Explicit) #

Webpack 5 requires clearer environment targeting to avoid ambiguity:

// webpack.config.js
module.exports = {
  // ...other configs
  externals: {
    jquery: {
      commonjs: 'jquery', // For Node.js/commonjs environments
      amd: 'jquery', // For AMD loaders
      root: 'jQuery' // For browser global variable
    },
    d3: {
      commonjs: 'd3',
      amd: 'd3',
      root: 'd3'
    },
    lodash: {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_'
    },
    moment: {
      commonjs: 'moment',
      amd: 'moment',
      root: 'moment'
    }
  }
};

3. Critical Checks to Ensure It Works #

• Confirm global variables exist: Make sure you’ve loaded the libraries in your HTML before your bundled script, e.g.:

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
  

• Match import names exactly: If you write import _ from 'lodash', the externals key must be lodash (not _). The value maps to the global variable, not the import alias.
• Check Webpack version: If you upgraded from Webpack 3/4 to 5, many loose old patterns will break—stick to the version-specific syntax above.

4. Quick Test to Verify #

After bundling, open your browser console:

• If you see Uncaught ReferenceError: [LibraryName] is not defined, either the global library isn’t loaded or your externals mapping is wrong.
• If your bundled JS file doesn’t contain the code for jQuery/D3/lodash/moment, your config is working!

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