36

フロントエンド ライブラリを作成したい。したがって、私はwebpackを使いたいです。私は特にcssと画像ローダーが好きです。ただし、webpack を使用している場合は、非 JS ファイルのみを要求できます。私はライブラリを構築しているので、私のライブラリのユーザーも構築することを保証できません。

すべてをUMDモジュールにバンドルして公開する方法はありますか? 複数のエントリ ポイントを使用してみましたが、モジュールを要求できません。

前もって感謝します

4

2 に答える 2

23

Webpack 2.0ドキュメント サイトで、ライブラリを作成するための適切なガイドを見つけることができます。webpack.config.jsそのため、この例では ver 2 構文を使用しています。

これは、サンプル ライブラリを含むGithub リポジトリです。

src/( js、pngおよび)のすべてのファイルを 1 つの JS バンドルにビルドします。これは単にモジュールcssとして必要になる可能性があります。umd

そのためには、 で次の設定を指定する必要がありますwebpack.config.js。

output: {
    path: './dist',
    filename: 'libpack.js',
    library: 'libpack',
    libraryTarget:'umd'
},

次のpackage.jsonものが必要です。

"main": "dist/libpack.js",

すべてを 1 つのファイルにパックするには、適切なローダーを使用する必要があることに注意してください。たとえばbase64-image-loader、代わりにfile-loader

于 2017-01-05T12:07:37.507 に答える
5

@OlegPro が書いたコメントはとても役に立ちます。これらがどのように機能するかを説明するために、この記事を読むことをお勧めします

http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

プロジェクトにバンドル ファイルをインポートできるようにするには、次のものが必要です。

  output: {
    path: path.resolve(__dirname, myLibrary),
    filename: 'bundle.js',
    library: "myLibrary",   // Important
    libraryTarget: 'umd',   // Important
    umdNamedDefine: true   // Important
  },
于 2018-11-08T21:26:55.107 に答える