web-dev-qa-db-ja.com

ライブラリをwebpackにバンドルする方法は？

フロントエンドライブラリを作成したい。そのため、webpackを使用したいと思います。私は特にCSSと画像ローダーが好きです。ただし、webpackを使用している場合は、JS以外のファイルのみが必要です。私は図書館を建設しているので、私の図書館のユーザーもそうすることを保証することはできません。

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

前もって感謝します

javascriptwebpackumd
16
Arwed Mett

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

ここに Githubリポジトリ とサンプルライブラリがあります。

src/（js、png、およびcss）からのすべてのファイルを、単にumdモジュールとして必要な1つのJSバンドルにビルドします。

そのためには、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

17
Oleg Pro

@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
  },
2
xeiton