webpackに依存ライブラリのes5とes2015をバンドルする方法を教えてください。

Question

私はそのバンドルaurelia-logging-colorをパッケージ化する必要があります。 aurelia-logging-color package.jsonで

、それはES5とes2015両方のバージョンを配布：

https://github.com/unional/aurelia-logging-color/blob/master/package.json

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

を私のパッケージは、このように、それはaurelia-logging-colorのES5バージョンをバンドルする必要がありES5するtranspiledされます。しかし、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] 

は、どのように私の代わりにES5の1をバンドルする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のは、それが存在する時はいつでもmainフィールド上package.jsonにmoduleフィールドを使用しています。

は、ここに私のwebpack configです。その動作を変更するには、resolve.mainFieldsを使用します。

resolve: { 
    mainFields: ['main'] 
}