Alai

webpack はモジュールバンドルラーです。 主な目的は、ブラウザで使用するために JavaScript ファイルをバンドルすることですが、あらゆるリソースやアセットを変換、バンドル、またはパッケージ化することも可能です。

目次

1. インストール
2. 導入
3. コンセプト
4. 貢献
5. サポート
6. コア チーム
7. スポンサーシップ
8. Premium パートナー
9. Other Backers and Sponsors
10. Gold Sponsors
11. Silver Sponsors
12. Bronze Sponsors

Special Thanks

Install

npmでインストールします。

npm install --save-dev webpack

yarn でインストール:

yarn add webpack --dev

Introduction

webpack はモジュール用のバンドルソフトです。 主な目的は、ブラウザで使用するために JavaScript ファイルをバンドルすることですが、あらゆるリソースやアセットを変換、バンドル、またはパッケージ化することも可能です。

Get Started

webpackのクイックスタートガイドと他のガイドをチェック。

Browser Compatibility

webpackはES5対応のすべてのブラウザをサポートします（IE8以下はサポート外です）。

Concepts

Plugins

webpack は豊富なプラグインインタフェースを備えています。 webpack 自身が持つ機能のほとんどは、このプラグインインターフェースを使用しています。 これは webpack を非常に柔軟にしている。

名前	状態	インストールサイズ	説明
mini-Planner	Description	Description	Description	Description	Nextcss-extract-plugin			CSS を別ファイルに展開します。 CSSを含むJSファイルごとにCSSファイルを作成します。
compression-webpack-plugin			Content-Encoding で提供するためにアセットの圧縮バージョンを用意する
html-webpack->	Complete-webpackComplete-webpackComplete-webpack		Simplizes of HTML files (index.html) to serve your bundles

Loaders

webpack allows using loaders to preprocess files. これにより、JavaScript 以外の静的リソースをバンドルすることができます。

ローダーは、require()ステートメントで loadername! プレフィックスを使用して有効にするか、webpack の設定から正規表現を使用して自動的に適用されます。

Files

名前	ステータス	インストールサイズ	説明
ローloader			ファイルの生の内容を読み込む (utf->)8)
val-loader			コードをモジュールとして実行、エクスポートはJSコードとして考慮
url->
val-npm			ファイルローダーと同様に動作する。 しかし、ファイルが制限値より小さい場合、Data Url を返すことができる
file-loader	file-npm		ファイルを出力フォルダに出力し、（相対）URLを返す

JSON

名前	ステータス	インストールサイズ	説明
			CSONファイルのロードとトランスパイル

Transpiling

。

名前	ステータス	インストールサイズ	説明
			ES2015+ コードをロードし、Babel を使用して ES5 にトランスパイル
			ES2015+ コードをロードし、Traceur
			JavaScriptのようにTypeScriptを読み込む
			Loads CoffeeScript like JavaScript

Templating

の場合

Name	ステータス	インストールサイズ	説明
			HTMLを文字列として出力します。 は静的リソースへの参照を必要とします
			Pug のテンプレートをロードして関数を返す
			Markdown を HTML にコンパイルする
			PostHTML を使って HTML ファイルを読み込み、変換する
			Handlebars を HTML にコンパイルする

Styling

Name	ステータス	インストールサイズ	説明
<style>			モジュールのエクスポートをスタイルとしてDOMに追加
			CSS ファイルにインポートを解決して CSS コードを返す
			LESSファイルをロードしてコンパイルする
			Sass/SCSS ファイルの読み込みとコンパイル
			Stylus ファイルのロードとコンパイル
		postcss->			postcss->	CSS/SSSファイルをPostCSSで読み込んで変換する

Frameworks

名前	ステータス	インストールサイズ	説明
			Vueコンポーネントの読み込みとコンパイル
		polymer->	polymer->
	HTML & CSS を任意のプリプロセッサで処理し、require() Web Components をファーストクラスのモジュールのように扱う
			Load and compiles Angular 2 Components
				Riot official webpack loader

Performance

webpack は非同期 I/O と複数レベルのキャッシュを使用します。

Module Formats

webpack は ES2015+, CommonJS, AMD モジュールをすぐにサポートします。 コードの AST に対して巧妙な静的解析を実行します。 さらに、単純な式を評価する評価エンジンも備えています。

コード分割

webpack は、コードベースを複数のチャンクに分割することができます。 チャンクは実行時に非同期にロードされます。

最適化

webpack は、頻繁に使用されるモジュールの重複排除、最小化、およびコード分割による初期読み込みと実行時読み込みの完全制御により、JavaScript の出力サイズを削減する多くの最適化を行うことができます。

Contributing

We want to contribute to webpack be fun, enjoyable, and educational for anyone, and everyone.私たちは、webpack への貢献が、誰にとっても、誰にとっても、楽しく、教育的であることを望んでいます。 私たちは、この単一のレポを越えて広がる活気のあるエコシステムを持っています。 私たちの組織または webpack-contrib 組織にある、私たちのローダーとプラグインをすべて格納しているリポジトリのいずれかをチェックアウトすることを歓迎します。 私たちは Webpack にあなたのスタンプを押す機会を与えることが好きですが、次のような他のさまざまな貢献を受け取ることにも興奮しています:

• ドキュメントの更新、拡張、デザイン、またはバグフィックス
• スペルや文法の修正
• README.NET Framework (英語)。md の修正または再設計
• Adding unit, or functional tests
• Triaging GitHub issues — particularly determining whether an issue still persists or is reproducible.
• Searching #webpack on twitter and help someone who needs help
• Teaching others how to contribute to the one of the many webpack’s repos!
• webpack の多くの機能の 1 つについて、ブログを書いたり、話したり、チュートリアルを作成する。
• webpack gitter チャンネルで他の人を助ける。

  心配な場合やどこから始めればよいかわからない場合は、Twitter で Sean Larkin (@TheLarkInn) に連絡するか、単に課題を提出すれば、メンテナが指導してくれます！

  私たちの Medium Publication で The Contributor’s Guide to webpack という連載も始まりました。 それを読んで、もしまだ助けが必要なら、質問や回答を投稿してください。

  webpack について話したいですか？ 私たちはあなたの講演のアブストラクト/CFP をぜひ拝見させてください。 webpack opencollective com までメールで送っていただければ、ポインタやヒントを差し上げます!!!

  自分自身のプラグインやローダーを作る

  ローダーやプラグインを作ったら、<3 それをオープンソースにして、npm に置いてほしいです。 私たちは x-loader, x-webpack-plugin の命名規則に従っています。

  サポート

  私たちは、webpack が単独で使われるだけでなく、他の素晴らしいツールの下に重ねられる低レベルツールであるとみなしています。 その柔軟性のため、webpack は必ずしも最も簡単な入門レベルのソリューションではありませんが、最も強力なツールであると信じています。 とはいえ、私たちは常に、機能を損なうことなく、ツールを改善し、シンプルにする方法を探しています。 これを達成する方法について何かアイデアがあれば、ぜひお聞かせください！

  始めたばかりであれば、私たちの新しいドキュメントとコンセプト ページをご覧になってください。 これには、初心者に最適なハイレベルな概要があります！

  webpack 1 のドキュメントをお探しですか？ 古い wiki をチェックしてください。ただし、この非推奨バージョンはもはやサポートされていないことに注意してください。

  何か議論したい、または単に助けが必要な場合は、常に助けを求める人がいる我々の Gitter ルームがあります！

  それでも問題がある場合は、ぜひ StackOverflow に webpack タグで質問を投稿してください。 webpack.config.js と関連するファイルを含む質問に答えるのはより簡単です!

  もしあなたがツイッターに詳しいなら、質問と一緒に #webpack をツイートすることができ、誰かが手を差し伸べて助けてくれることでしょう。

  License

  

  Core Team

  Tobias Koppers Core Founder webpack

  Johannes Ewald ローダー & プラグイン Early adopter of webpack

  Sean T. Larkin 広報 コアチーム創設者

  Kees Kluskens 開発 Sponsor

  Sponsoring

  コアチームメンバーのほとんどがそうです。 webpackのコントリビューターやエコシステムの貢献者は、自由な時間にこのオープンソースの作業を行っています。 もしあなたが真剣なタスクに webpack を使っていて、私たちにもっと時間を割いてほしいと思うなら、ぜひ寄付をお願いします。 このプロジェクトはあなたの収入/生産性も向上させます。 開発やアプリケーションをより速くし、必要な帯域幅を減らすことができるのです。

  寄付金はこのように使われます。

  • Allow the core team to work on webpack
  • Thank contributors if they invested a large amount of time in contributing
  • Support projects in the ecosystem that are great value for users
  • Support projects that are a great value of users
  • インフラ費用
  • 金銭取扱手数料

  プレミアムパートナー

  

  その他の支援者とスポンサー

  OpenCollectiveを使い始める前に、私たちは、OpenCollectiveを使い始める前に、私たちは、OpenCollectiveを使い始めていました。 寄付は匿名で行われました。 今、私たちはこれらのスポンサー（および OpenCollective を使って寄付を続けているスポンサー）に謝意を表したいと思います。 もし誰かを見逃していたら、PR を送っていただければ、このリストに追加します。

  

  ゴールドスポンサー

  ゴールドスポンサーになると、Github の README にロゴとあなたのサイトへのリンクが掲載されます。

  

  シルバースポンサー

  シルバースポンサーになると、GithubのREADMEにロゴとあなたのサイトへのリンクが表示されます。

  

  ブロンズスポンサー

  ブロンズスポンサーになると、Github の README にロゴとあなたのサイトへのリンクが表示されます。

  

  Backers

  バッカーになると、GithubのREADMEにあなたのサイトへのリンクとともに画像を掲載することができます。

  

  Special Thanks to

  （時系列順）

  • @google for Google Web Toolkit (GWT)です。 JavaをJavaScriptにコンパイルすることを目的としたもの。 webpackと同様のCode Splittingが特徴です。
  • @medikoo module-webmakeのプロジェクトです。webpackは、modules-webmakeにCode Splittingが欲しいということで生まれました。 興味深いことに、Code Splitting の問題はまだ未解決です (議論してくれた @Phoscur にも感謝します)。
  • @substack は browserify を、これは類似のプロジェクトで多くのアイデアの源です。
  • @jrburke は require.Webmake を、そして @substack は webpack を開発しました。
  • @defunctzombie: browser-field spec で、node.js、browserify、webpack で利用可能なモジュールを作成。
  • @shama, @jhnns and @sokra for maintaining this project
  • Everyone who has written a loader for webpack.You affects the direction.
  • Everyone who has written a loader for webpack.You affects the direction. あなた方はエコシステムです…
  • ここで言及し忘れましたが、webpack にも影響を与えたみなさん。