遠位WebPACKのワークフロー（2） - WebPACKの基本的な使い方 - コードワールド

著者：JOGISの
説明へのリンク：https://github.com/yesvods/Blog/issues/3
転載明記してください原作者情報とリンク

WebPACKの

前の記事では、これは別の機会に、複数ページのサイトを持つ単一ページのアプリケーション（シングルページアプリケーション）にWebPACKの使い方をご紹介します、WebPACKのとインストール方法について説明します。

入出力

他のモジュールローダと同様、WebPACKのも、このようなentry.jsとして、エントリ・ファイルを設定する必要があり
、構成ファイルのwebpack.config.js内のエントリに直接、次のファイル書き込みを導入するために、いくつかの構成があります。

module.exports = {
  entry: {
    "entry":"./entry.js"
  },
  output: {
    path: "build",
    filename: "bundle.js"
  }
}

コマンドライン

> webpack

WebPACKの検出プロファイル、および出力ビルド/ bundle.jsに一つのファイルの依存関係の出力にファイルのモジュール入口パスとファイル名を読んで、便利なこと

簡単なHTMLを導入することにより、

<script src="./build/bundle.js"></script>

これは、ブラウザで実行することができます。

ローダ

JSコンパイルしてロードされ、CSSのコンパイルとロード、画像の読み込みと圧縮、JSとCSSの圧縮：シンプルSPAプログラムは含めて、ロードされます。

JSにローディングPNG / JPG形式のCSS-ローダ、スタイル・ローダ、URLローダと異なるリソースJSファイルにロードするため、など、例えば、URLローダ：のWebPACKのような、ローダー機構を提供します画像ファイル、ロードcssファイルのCSS /スタイルローダは、あまりローダーは、CSSに以下のファイルをコンパイルするために使用されます。

ここでは（ここでは詳細に説明）いくつかの共通ローダーは以下のとおりです。

スタイル+ CSS +負荷の少ないブートストラップレスバージョン：

require('style!css!less!./bower_components/bootstrap/bootstrap.less');

スタイル+ CSSの負荷の一般的なスタイルファイル：

require('style!css!./styles/main.css');

URLのロード画像リソースファイル：

require('url!./images/logo.png');

負荷JSON形式にJSONローダー：

require('json!./data.json');

ローダーを使用せずに、JSファイルの接尾辞

require('./scripts/main.js');

コーヒースクリプトがロードされました

require('coffee!./scripts/main.coffee');

バベルローダ経験ES6 / 7の機能により、子供用の靴の早期導入のように：

require('babel!./scripts/es6.js');

予期しない結果があるだろう、すべてのnode_moduleモジュールバベルでロードローダーを避けるために、なお、だけでなく、ケースの負荷の大多数は、ロード時間が非常に長いです。reactjs JSXファイルは詳細な外観を使用してロードされたようバベルも使用することができます。

コンフィギュレーション・ローダー

画像やCSSの多くのリソースがある場合だけではWebPACKの負荷リソースへの別の方法を提供し、ロードする必要があり、書き換え可能ローダ不器用をライン内の負荷のリソースへの道を導入しました。
構成プロファイルの追加：

module.exports = {
  module: {
    loaders: [
      {test: /\.css$/, loader: "style!css"},
      {test: /\.(png|jpg)$/, loader: "url-loader?limit=8192"}
    ]
  }
}

テストでは、適切なローダーファイル名マッチング使用して、正規表現である場合は
/.css$/マッチxx.cssファイルを、しかしxx.sassまたはxx.css.zipファイルには適用されません
マッチングに加え/.css/ xx.cssもxx.css.zip一致させることができます

（のようなHTTPアドレスクエリで）YYに追加xxを示すために、ローダ？XX = yyのパスパラメータの後に追加することができます

ローダーを使用する前に、必要が使用することに留意すべきです

> npm i --save xxx-loader

それぞれのローダがインストールされ、そしてpackage.json --saveに依存構成により、負荷が必要導入を必要としません。

検索パス変数

Loaderは、上記の、これを行うことができますWebPACKののみと考えられる場合、あなたの失望をさせ、日常使用のWebPACKのリソースを統合することは容易です。

それも、よりエレガントな、デフォルトの検索パスを追加し、WebPACKのを修正することにより、これらの./app/src/scripts/main.js設定ファイルのパスを記述するために、相対パスを使用し、時間をかけて負荷リソースを見ることができます。

// webpack.config.js
var path = require("path")
module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "./app/src/scripts")
    }
  }
}

設定ファイルを変更した後にロードされます。

require("js/main.js");

デフォルトの検索パスの設定

一息-wiredepでHTMLファイルを指定bower_componentsために、フロントエンドの開発を頑固、最終的には、いくつか亭プラグイン一気の使用は、動的bower.jsonの依存関係にロードすることができます。
WebPACKの中に導入する非常に便利な方法もあります：
まず、設定を追加します

module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "src/scripts"),
      src: path.join(__dirname, "src/scripts"),
      styles: path.join(__dirname, "src/styles"),
      img: path.join(__dirname, "src/img")
    },
    root: [
      path.join(__dirname, "bower_components")
    ]
  },
  plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
      )
  ]
}

resolve.rootを追加し、次の構文を使用して、デフォルトの検索パスを表します。

require("jquery");

WebPACKのCommandJSモジュールnode_module / index.js、index.jsを見つけるためにbower_components / jqueryのディレクトリの下に行われる
バウアーがメインの属性を指定bower.jsonプロジェクトファイルのエントリ使用して、カテゴリCommandJS仕様に属していないため、しかし
ポイントを、誰もが知っているだろうものの文字列の中のプラグインはそれをやっています

その後、我々は簡単にjqueryの内部の任意のjsファイル内で参照することができます：

var jQuery = $ = require("jquery");

なお、ディレクトリのフォルダ名bower_componentsではありませんjquery.jsが、ファイルが必要です

マルチページの開発

WebPACKのではないだけでは、SPAの発展のために、複数ページのサイトのために、WebPACKのほか、複数のエントリ用の設定ファイルを変更することで、サポート：

module.exports = {
  entry: {
    "entry":"./src/scripts/entry.js",
    "swiperEffect":"./src/scripts/swiperEffect.js"
  },
  output: {
    path: "build"
    filename: "[name].bundle.js"
  }
}

出力設定の内部には、[名前]を出力する2つのファイルに対応し、WebPACKの時間を実行して、キーの各エントリを表します。

build/entry.bundle.js
build/swiperEffect.bundle.js

そして、彼らはindex.htmlの2つのページで引用し、about.html友人だったことができます

ファイルの分離

フロントエンドエンジニアリングは、ブラウザが最大6つの同時HTTPリクエストになりましたので、この機能を使用することができ、ブラウザの負荷ファイルの速度に単一のjsあまり効果を提出、しかし、一つに統合され、複数のjsの必要性を表明リクエストは、httpを軽減することです、独立したサードパーティのリポジトリで再ロードされます。

使用CommandJS仕様

//entry.js
require.ensure(["jquery", "imgScroll"], function(require){
  var $ = require("jquery");
  require("imgScroll");
  $("#container").scroll({
    XXX
  })
})

完成積載する文書入力モジュールに依存しないを依存し、需要の負荷依存性と呼ばれるrequire.ensureファイル宣言、、、積載連続した時間によって、あなたは要求する必要があります

再びWebPACKのコンパイル：

build/entry.bundle.js
build/swiperEffect.bundle.js
build/2.2.bundle.js

jqueryの+ imgScroll非同期の内容ロードされ2.2.bundle.js
百聞は一見にしかずです。

バンドル

2.2.bundle.jsは非同期ロード後entry.bundle.js負荷で見ることができます。

WebPACKの実用的なコマンド

単に実行WebPACKのに加えて、あなたはまた、文書処理を配備するのは簡単、いくつかのパラメータを追加することができます。

JSファイル出力、uglify圧縮後：

> webpack -p

自動的に動的コンパイルの実行のWebPACKの変化を監視します。

> webpack --watch

通常のDev段階、ライブサーバーがオートメーション開発面倒なウィンドウを切り替えることができますし、Enterキーを押しますと--watch使用。

唯一の基本的な使用WebPACKのフロントエンド開発、より多くのパラメータおよび機能の使用を説明の上、公式サイトを参照