npm安装的依赖包如何引入slim版本？webpack下如何区分环境加载对应构建产物

你可以通过以下三种方式实现开发/生产环境自动加载对应版本的需求： #

方案1：使用resolve.alias别名配置（推荐，配置更简单） #

在webpack配置文件中按环境指定socket.io-client的解析路径即可，无需修改原有业务代码：

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // 其余原有配置项保持不变
  resolve: {
    alias: {
      'socket.io-client': isProd 
        ? require.resolve('socket.io-client/dist/socket.io.slim.js')
        : require.resolve('socket.io-client/dist/socket.io.dev.js')
    }
  }
}

方案2：使用NormalModuleReplacementPlugin内置插件 #

适合需要更复杂模块替换逻辑的场景：

const webpack = require('webpack')
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // 其余原有配置项保持不变
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /^socket\.io-client$/,
      res => {
        res.request = isProd 
          ? require.resolve('socket.io-client/dist/socket.io.slim.js')
          : require.resolve('socket.io-client/dist/socket.io.dev.js')
      }
    )
  ]
}

方案3：业务代码直接指定导入路径 #

如果不想修改webpack配置，也可以直接在导入时按环境判断加载对应文件：

const io = process.env.NODE_ENV === 'production'
  ? require('socket.io-client/dist/socket.io.slim.js')
  : require('socket.io-client/dist/socket.io.dev.js')

这种方案无需修改构建配置，但需要调整原有业务代码的导入逻辑，存在代码侵入性。 #

注意事项 #

如果升级了socket.io-client的大版本，建议先核对node_modules/socket.io-client/dist目录下的文件命名和路径是否有变更，按需调整配置中的路径即可。

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