webpackでjavascriptライブラリを作成する

Question

なぜこれがとても複雑であるのかわかりません私のプロジェクトには、配布されるライブラリとテスト用に使用される別の2つのワークスペースが必要です。

は私が「サンドボックス」で使用することができ、「ライブラリ」のファイルを取得するようWebPACKのとES6モジュールと「エンジン」プロジェクトを構築したい

project 
--engine 
---math 
----vec2.js 
---dist 
----library.js 
---main.js 
--sandbox 
---main.js 

私はファイル構造を持っているかです。

「エンジン」のメインファイルは、サンドボックスのメインファイルは、私が「ライブラリを構築する際に問題があるこの

import lib from '../engine/dist/library'; 
const game = new lib(); 

ようになり、この

import vec2 from './math/vec2'; 
export default class Library { 
    constructor() { 
     this.vec2 = vec2; 
    } 
} 

アンのようになります。 js "ファイルをwebpackで読み込み、" sandbox "メインファイルにインポートします。私はそこでクラスを呼び出すことはできません。私はこのエラーが発生します。

Uncaught TypeError: o.default is not a constructor 
    at Object.<anonymous> (library.js:1) 
    at e (library.js:1) 
    at library.js:1 
    at library.js:1 

マイwebpack.config.jsファイルは、私がこの仕事を行いますいくつかの構成のWebPACKのニーズや、いくつかのプラグインが欠落しているしなければならない。この

var webpack = require('webpack'); 
module.exports = { 
    context: __dirname, 
    entry: __dirname+"/main.js", 
    output: { 
     path: __dirname+"/dist", 
     filename: "library.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.UglifyJsPlugin() 
    ] 
}; 

のように見えます。私は単にes6モジュールを使ってwebpackを使ってライブラリを構築したいので別のプロジェクトで使うことができますが、設定方法はわかりません。私はes6からes5への移行にベルベルを使用しています

Answer 1

output.libraryTargetを設定する必要があります。この場合、ターゲットcommonjs-moduleが適切です。したがって、outputは次のようになります。

output: { 
    path: __dirname+"/dist", 
    filename: "library.js", 
    libraryTarget: "commonjs-module" 
}, 

さまざまなターゲットがドキュメントに記載されています。また、Guides - Authoring Librariesを読むこともできます。