Webpack 4如何将import转为require且不打包依赖库代码？

要实现只保留require('react')引用、不打包React库代码的效果，你只需要在Webpack配置中添加**externals**选项即可，这正是Webpack用来处理外部依赖的核心配置。

为什么之前会打包React代码？ #

Webpack默认会把所有你import的模块（包括node_modules里的第三方库）都打包进最终输出文件。你现在的配置没有告诉Webpack哪些模块是"外部的"——也就是不需要打包、而是留给运行环境（这里是Node.js）去加载的依赖，所以它把React的代码也一并打包了。

修改后的Webpack配置 #

在你的配置对象中添加externals字段，明确指定react是外部依赖：

module.exports = {
  // 你的其他现有配置...
  target: 'node',
  // 新增的externals配置
  externals: {
    react: 'commonjs react'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            sourceMap: false,
            babelrc: false,
            presets: [
              ['env', { modules: false }],
              'react'
            ],
            plugins: ['transform-object-rest-spread', 'transform-es2015-modules-commonjs'],
          },
        },
      },
      // 其他规则...
    ]
  },
  // 其他配置...
};

配置说明 #

externals: { react: 'commonjs react' }的作用是：

• 当Webpack遇到import React from 'react'时，会将其转换为Node.js兼容的var _react = require('react')
• 完全跳过React库代码的打包过程，让Node.js在运行时通过require去加载node_modules里的React

额外验证 #

你的Babel配置已经会生成_interopRequireDefault辅助函数（用来处理ES模块导入CommonJS模块的兼容问题），所以最终输出的代码会和你期望的完全一致：只包含严格模式声明、require引用和辅助函数，不会有任何React的冗余代码。

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