Webpack整理

3864 ワード

現状:先端開発は多言語、多階層のコードと組織に基づいており、先端製品の交付はブラウザに基づいており、これらの資源はインクリメンタルローディングによってブラウザ側に運行されている.
webpackの特徴
コード分割
Webpackには二つの組織モジュール依存方式があり、同期と非同期があります.非同期依存性は分割点として新しいブロックを形成する.依存ツリーを最適化した後、各非同期ブロックは一つのファイルとして包装されます.
Loader
Webpack自体は元のJavaScriptモジュールだけを扱うことができますが、loader変換器は様々なタイプのリソースをJavaScriptモジュールに変換することができます.このように、どのリソースもWebpackで処理できるモジュールになります.
インテリジェント解析
Webpackには、モジュール形式がCommon JS、AMDであるか、それとも普通のJSファイルであるかに関わらず、ほとんどいかなる第三者ライブラリを処理する知能解析器があります.さらに,負荷依存時には,動的表現require("./templates/"+name+".jade")を使用することができます.
プラグインシステム
Webpackは機能が豊富なプラグインシステムがあります.ほとんどのコンテンツ機能はこのプラグインシステムに基づいて動作します.オープンソースのWebpackプラグインを開発して使用して、様々なニーズを満たすことができます.
快速運転
Webpackは、非同期I/Oと多段キャッシュを使用して、動作効率を向上させ、信じられないほどのスピードで高速にコンパイルできるようにします.
Webpackは入口ファイルを分析し、依存関係を含む各ファイルを解析します.これらのファイルはすべてbundle.jsに梱包します.Webpackは各モジュールに一意のidを割り当てて、このIDインデックスとアクセスモジュールを通します.モジュールはrequireを実行する時に実行します.
Loader
Webpack自体はJavaScriptモジュールしか処理できません.他のタイプのファイルを処理するには、loaderを使って変換する必要があります.loader自体は関数であり、ソースファイルをパラメータとして受け取り、変換の結果を返します.
Loaderは、require()参照モジュールを追加しても良いし、webpackグローバル構成でバインディングしても良いし、コマンドラインで使用しても良い.
CSSファイルのstyle.cssを導入して、トップページはstyle.cssもモジュールのように見えて、それをcss-loaderで読み取って、style-loaderでページに挿入します.
entry.jsファイルに導入する:

require("!style-loader!css-loader!./style.css") //    style.css
//           loader，

インストールloader:

npm install css-loader style-loader

ページを更新すればOKです.
私達もentry.jsファイルの中のrequire(“!style!css!./style.css”)をrequire(「./style.css」)に修正して実行します.

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

設定ファイル
コマンドラインの実行の代わりにプロファイルを構成することができます.package.jsonを作成してwebpackの必要な依存を追加します.

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "A simple webpack example.",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "author": "zhaoda",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2"
  }
}

npm installを実行してプロファイルwebpack.co.nfig.jsを作成します.

var webpack = require('webpack')
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

最後にwebpackを実行すればOKです.
プラグインを追加
プラグインは、より多くのloaderではできない機能を達成することができます.一般的にはwebpackの設定情報pluginsオプションで指定されています.

var webpack = require('webpack')
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('This file is created by zhaoda')
  ]
}

開発環境
webpackをコンパイルするときは、パラメータによってコンパイルされた出力内容に進捗と色があります.

$ webpack --progress --colors

モニターモードを起動します.変更されていないモジュールはコンパイル後にメモリにキャッシュされます.毎回コンパイルされなくて、全体の速度はとても速いです.

$ webpack --progress --colors --watch

webpack-dev-serverを使った開発サービスはより良い選択です.これはlocalhost:8080で、express静的リソースウェブサーバを起動し、自動的にWeb packを傍受モードで実行し、ブラウザで開かれます.http://localhost:8080/またはhttp://localhost:8080/webpack-dev-server/プロジェクトのページをブラウズしてコンパイルした後のリソース出力ができます.そして、socket.ioサービスを通じて、それらの変化をリアルタイムでモニターし、自動的にページを更新します.

//   
$ npm install webpack-dev-server -g
//   
$ webpack-dev-server --progress --colors

JSのStering split()の使い方を詳しく説明します.