为什么对我的 webpack 输出使用 .cjs 扩展名会抑制源映射的生成？

问题描述

我最近决定告别 ES5 向后兼容性，而是想生成包含 ES6 和 ES2018 代码包的 npm 包。

我还想在我的 package.json 文件中使用 "type": "module"，同时仍然有一个 Commonjs 包作为 index.cjs。但是，一旦我将扩展名更改为 .cjs，该文件的源映射就会消失。

我能做些什么来防止这种情况发生？源映射生成器是否需要特殊设置才能映射到 index.js 以外的文件，如果需要，这些设置会去哪里？

这是我的 webpack 配置：

const { resolve } = require('path');

module.exports = env => {
  const umd = !!env?.umd && (/^[ty]/i.test(env?.umd) || Number(env?.umd) !== 0);
  const cjs = !umd && !!env?.cjs && (/^[ty]/i.test(env?.cjs) || Number(env?.cjs) !== 0);
  const esversion = umd ? 'es6' : 'es2018';
  const dir = umd ? 'web' : (cjs ? 'cjs' : 'fesm2015');
  const libraryTarget = umd ? 'umd' : (cjs ? 'commonjs' : 'module');
  const outFile = `index.${cjs ? 'c' :''}js`;
  const asModule = !umd && !cjs;

  return {
    mode: env?.dev ? 'development' : 'production',target: [esversion,'web'],entry: './dist/index.js',experiments: {
      outputModule: asModule
    },output: {
      path: resolve(__dirname,'dist/' + dir),filename: outFile,libraryTarget,library: umd ? 'tbMath' : undefined
    },module: {
      rules: [
        {
          test: /\.js$/,use: {
            loader: 'babel-loader',options: { presets: [['@babel/preset-env',{ targets: {
              chrome:  umd ? '58' : '64',edge:    umd ? '14' : '79',firefox: umd ? '54' : '78',opera:   umd ? '55' : '51',safari:  umd ? '10' : '12',} }]] }
          },resolve: { fullySpecified: false }
        }
      ]
    },devtool: 'source-map'
  };
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）