Design Note

webpackについてのメモ

  • ビルドツールはどんなのがある？
    • webpack
      • 依存関係を解決して、配布物をビルドするツール（コンパイラ）
      • JSやCSS、画像、いろいろ扱っている
      • gruntもgulpも不要
    • Browserify
      • JS専用
  • 設定
    • require
      • extract-text-webpack-plugin
        • バンドルされたcssを抽出してcssファイルを生成する
      • path
        • パス関連の定義に利用する
    • target
      • どの環境をターゲットにするか
    • entry
      • バンドルのエントリーポイント
      • キーはチャンク名。出力ファイル名？きっとここで取得するファイルと出力するファイルを指定している
      • あたいは文字列 or 配列。配列で指定すると1チャンクで扱える？
      • page1: “./page1”,
      • page2: [“./entry1”, “./entry2”]
      • 取得したファイル内でimportやrequireしていれば都度取得しているっぽい。
    • output
      • コンパイルされたファイルを書き込む際のオプション
      • filename
        • 出力するファイル名
      • path
        • 出力ディレクトリ（絶対パス）
        • [hash]に置き換えられる
      • publicPath
        • 出力ファイルの公開URL
      • libraryTarget
        • ライブラリをエクスポートするフォーマット
        • commonjs2
          • module.exportsでエクスポートする
    • resolve
      • モジュールの解決に関連するもの？
      • alias
        • モジュールを他のモジュール、またはパスへ変換
        • require時のパスに影響する？
    • stats
      • バンドル情報を正確に制御できる
      • children
    • vue （カスタムオプションはwebpack2からNGになった）
      • *.vueに対して次の設定をかける
      • postcss
        • vue-loaderにより処理されたCSSに対して、変換をかける
        • require(‘autoprefixer’)({
          • autoprefixerでcssを多岐にわたるブラウザ対応する
          • browsers
      • loaders
        • css
          • ExtractTextPlugin.extract(‘css’)
            • プラグインへの登録が必要
            • 生成されたファイルをロードする？？
    • module
      • rules
        • test
          • 対象ファイルを正規表現で表す
        • exclude
          • 対象にしないパスを指定
        • use
          • loader
            • どのpkgのローダーを利用するか
          • options
        • enforce: “pre”
    • plugins
      • webpack.DefinePlugin
        • コンパイル時に構成する定数（env）作れる
      • webpack.optimize.CommonsChunkPlugin
        • 複数のエントリーポイントの共通モジュールからなる、別ファイルを作成できる
        • バンドルから共通モジュールを分離できる
        • あとで使用できるようにキャッシュ
        • 新しいページにアクセスするたびに、バンドルをロードする必要がなくなる
        • エントリーポイントより前に、ロードする必要がある（HTMLで）
      • webpack.optimize.UglifyJsPlugin
        • 圧縮する
      • textract-text-webpack-plugin
    • externals
      • バンドルファイルに含まれないようにする
      • 依存性を排除する方法を提供する
      • buildから除外する
      • CDNやWebサーバからスタティック配信したライブラリを利用することになります。
      • scriptタグで直接読み込むとか
      • externals にファイル名が指定されていれば require() は展開されず、実行時に node によって require される。
      • externalsしない
        • var commonConstants = require(‘app/utils/common-constants’);
          • これをやるにはnode_pathの環境変数設定が必要っぽい
      • externalsする
        • var commonConstants = __webpack_require__(29);