webpackガイド-初探

原文リンク

翻訳者:おにぎりお父さん

開始
すでにwebpackがJavaScriptのmodulesをコンパイルするために使われていることを知っているかもしれません.インストールが成功すれば、CLIまたはAPIの形でwebpackを使うことができます.webpackの初心者なら、まずコア概念と競合品を読んで、なぜwebpackを使うのですか?他のコミュニティで淘汰された競合品ではないです.
ベースの取り付け
まずフォルダを作成し、npmで初期化して、ローカルにwebpackをインストールします.

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

私たちは以下のファイルディレクトリの結果を作成します.

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.

この では、タグを して な が し、index.jsファイルに するlodashは、 にすでにページに まれています.
このようにJavaScriptプロジェクトを するには のような があります.

ライブラリに する がない

が けていたり、 った が されていたりすると、アプリケーションは しく できなくなります.

が まれている 、 されていませんが、ブラウザは でないコードセグメントを にダウンロードします.

はい、 からindex.jsを ってこれらの を します.
バンドルを
まず、カタログを して、コードlodashからソースコード_を します.「source」フォルダには が したコードを します.「distribution」ファイルにはビルダー を て したwebpackが されます. らは にブラウザにロードされます.
プロジェクト

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

/distに/srcをバンドルするために、 するライブラリをローカルにインストールする があります. は の りです.

npm install --save lodash

そしてそれを たちのスクリプトに します.
src/index.js

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

、 たちはscriptを りますので、 たちはoutputファイルを したいです.lodash index.jsを します. lodashそれを して、 のindex.htmlを してこのバインディングをロードします. のファイルに えて、 のようにします.
dist/index.

  
   
     
-    
   
   
-    
+    
   
  

このステップにおいて、importが の にロードし、として された(ここではグローバルコード がない).モジュールに な を することによって、webpackはこれらの を いて を し、その 、この を いて されたバンドルを することができる.(bundleでは、webpackパッケージ の をbundleで ぶようにしています.)このbundleではシナリオが しい に されます.
の によれば、 たちのシナリオをエントリインターフェースとして/srcを としてindex.jsを します. な は の りです.

./node_modules/.bin/webpack src/index.js dist/bundle.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

                ，                。

lodashファイルをブラウザで きます. であれば、 のようなテキストが えます.
ES 2015モジュール_およびbunlde.js は、 くのブラウザによってサポートされていませんが、webpackは としてそれらをサポートしています.その は、webpackが にこれらのコードを して、 いブラウザでも できます.webpackファイルを めば、webpackがどのようにそれらを するかを ることができます.それは に です.
を う
ほとんどの はより なステップが なので、webpackはプロファイルをサポートしています. に のコマンドラインを うよりも、プロファイルを うほうがより な です. コマンドの わりに コマンドを します.まず、プロジェクト を します.
プロジェクト

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.co.nfig.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

プロファイルを ってプロファイルをもう します.

./node_modules/.bin/webpack --config webpack.config.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]
If a webpack.config.js is present, the webpack

もしwebpack.co nfig.jsが するならば、index.htmlコマンドラインツールは、デフォルトのプロファイルとして します.importオプションを すれば、ファイル から のプロファイルを できます.この は、 が な に で、 に です.
ファイルはコマンドラインよりも な をサポートします. のローディング 、プラグイン、 オプション、その の を できます.プロファイルドキュメントを して、より くの を ることができます.
NPMスクリプト
コマンドラインでwebpackを するコマンドが いため、 なショートカットを できます.exportファイルには のnpmスクリプトを できます.

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

はdist/bundle.jsコマンドを するだけで、 いwebpackコマンドに わることができます.これらを してwebpackにおいて、 なパスを く わりに、 にインストールされたパケットを で することができます.この により、--configを することができます.package.jsonを するのではなく、npmベースのプロジェクトのほとんどがwebpを するためになりました.ackコマンドの .
のような を しましょう. のような が られます.

npm run build

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

おわりに
は な プロジェクトがあります.「コアコンセプト」と「プロファイル」を して、wepackの をよりよく するようにします.APIの はwebpackが するインターフェースを することに しています.または、より い を して したいなら、 の で、あなたが するdemoは に のような に づいています.
プロジェクト

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules