Question

我必须用它打包捆绑Node.parentElement。

在aurelia-logging-color package.json中，它分发了es5和es2015版本：

aurelia-logging-color

{
  "main": "dist/es5/index.js",
  "module": "dist/es2015/index.js"
}

我的包被转换为es5因此它应该捆绑aurelia-logging-color的es5版本。但是，es2015版本是捆绑的：

  [0] ./~/aurelia-logging/dist/commonjs/aurelia-logging.js 2.09 kB {0} [built]
  [1] ./dist/es5/global.js 889 bytes {0} [built]
  [2] ./dist/es5/getLoggers.js 209 bytes {0} [built]
  [3] ./dist/es5/extendLogger.js 1.66 kB {0} [built]
  [7] ./dist/es5/configIDValidation.js 406 bytes {0} [built]
  [8] ./dist/es5/getLogger.js 1.5 kB {0} [built]
  [9] ./dist/es5/setLevels.js 376 bytes {0} [built]
  [10] ./~/aurelia-logging-color/dist/es2015/index.js 33 bytes {0} [built]
  [11] ./~/aurelia-logging-memory/dist/es5/index.js 1.87 kB {0} [built]
  [12] ./~/aurelia-logging-color/dist/es2015/Ansi16mBrush.js 1.5 kB {0} [built]
  [13] ./~/aurelia-logging-color/dist/es2015/AnsiBrush.js 1.77 kB {0} [built]
  [14] ./~/aurelia-logging-color/dist/es2015/CSSBrush.js 1.22 kB {0} [built]
  [15] ./~/aurelia-logging-color/dist/es2015/ColorAppender.js 737 bytes {0} [built]
  [16] ./~/aurelia-logging-color/dist/es2015/createBrush.js 796 bytes {0} [built]
  [23] ./dist/es5/index.js 907 bytes {0} [built]

如何告诉webpack将es5捆绑在一起？

这是我的webpack配置：

const paramCase = require('param-case')
const pascalCase = require('pascal-case')
const path = require('path')

const pjson = require('./package.json')

const filename = paramCase(pjson.name)
const globalVariable = pascalCase(filename)

module.exports = {
  devtool: 'source-map',
  entry: {
    [filename]: './dist/es5/index'
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        loader: "source-map-loader",
        test: /\.js?$/
      }
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: `${filename}.es5.js`,
    library: globalVariable,
    libraryTarget: 'var',
    devtoolModuleFilenameTemplate: (info) => {
      if (info.identifier.lastIndexOf('.ts') === info.identifier.length - 3) {
        return `webpack:///${pjson.name}/${info.resource.slice(9)}`
      }
      else {
        return `webpack:///${info.resourcePath}`
      }
    }
  }
}

Answer 1

Webpack使用module中的package.json字段，而不是main字段。要更改此行为，您可以使用resolve.mainFields。

如果您总是想使用main字段，那就是：

resolve: {
  mainFields: ['main']
}

如何告诉webpack捆绑依赖库的es5而不是es2015？

1 个答案: