Webpack付録

3634 ワード
フロントエンドビルド 先端工程化 先端 javascript webpack
Webpack付録
すべてのドキュメントページを表示します.全体のスタックが開発され、より多くの情報が得られます.
本文のリンク:webpackの原理、原文の広告のモダリティの枠は遮られて、読む体験はよくなくて、だからコストの文を整理して、探しやすいです.
よく使うLoaders
ファイルを読み込み
  • raw-loader:テキストファイルの内容をコードにロードし、3-20にSVGをロードする際に紹介されています.
  • file-loader:ファイルを一つのフォルダに出力し、コードの中で相対URLを通じて出力されたファイルを参照し、3-19に画像をロードし、3-20にSVGをロードし、4-9 CDN加速度について説明しています.
  • url-loader:file-loaderと同様ですが、ファイルが小さい場合はbase64としてファイル内容をコードに注入し、3-19に画像をロードし、3-20にSVGをロードすることができます.
  • source-map-loader:ブレークポイントの調整を容易にするために追加のSource Mapファイルをロードして、3-21ローディングSource Mapに紹介されています.
  • svg-inline-loader:圧縮されたSVGコンテンツをコードに注入し、3-20にSVGをロードする際に紹介されています.
  • node-loader:Node.js原生モジュールをロードします.nodeファイル.
  • image-loader:画像ファイルをロードして圧縮する.
  • json-loader:JSONファイルをロードします.
  • yaml-loader:YAMLファイルをロードします.
    • コンパイル
  • pug-loader:PugテンプレートをJavaScript関数に変換して返します.
  • handlebars-loader:Handlebarsテンプレートを関数にコンパイルして返します.
  • ejs-loader:EJSテンプレートを関数にコンパイルして返します.
  • haml-loader:HAMLコードをHTMLに変換します.
  • markdown-loader:MarkdownファイルをHTMLに変換します.
    • スクリプト言語を変換
  • babel-loader:ES 6をES 5に変換し、3-1でES 6言語を使用して紹介されています.
  • ts-loader:Type ScriptをJavaScriptに変換して、3-2 Type Script言語を使う中に遭遇しました.
  • awesome-typescript-loader:TypeScriptをJavaScriptに変換して、性能はts-loaderより良いです.
  • coffee-loader:Coffee ScriptをJavaScriptに変換します.
    • スタイルファイルを変換
  • css-loader:CSSをロードして、モジュール化、圧縮、ファイル導入などの特性をサポートします.
  • style-loader:JavaScriptにCSSコードを注入し、DOM操作でCSSをロードします.
  • sass-loader:SCSS/SASSコードをCSSに変換し、3-4でSCSS言語を使用して紹介されています.
  • postcss-loader:CSSの文法を拡張して、次世代のCSSを使って、3-5でPostCSSを使う中に紹介があります.
  • less-loader:LessコードをCSSコードに変換します.
  • styloader:StylasコードをCSSコードに変換します.
    • チェックコード
  • eslint-loader:ESLintを通じてJavaScriptコードを検査し、3-16チェックコードに紹介されています.
  • tsleint-loader:Type ScriptコードをTSLintで確認します.
  • mocha-loader:Mochaテスト用のコードをロードします.
  • coverjs-loader:テストのカバー率を計算します.
    • その他
  • vue-loader:Vue.js単一ファイルコンポーネントをロードし、3-7でVueフレームワークを使用して紹介されています.
  • i 18 n-loader:多言語バージョンをロードし、国際化をサポートします.
  • ignore-loader:一部のファイルを無視して、3-11構築のための同等のアプリケーションに紹介されています.
  • ui-component-loader:必要に応じてUIコンポーネントライブラリをロードし、例えばANtd UIコンポーネントライブラリを使用するときは、Buttonコンポーネントだけを使用してすべてのコンポーネントにパッケージ化することはない.
    • 一般的なPlugins
    挙動を変更するために使用します
  • define-plugin:環境変数を定義し、4-7区分環境に紹介されています.
  • context-replaccement-plugin:require文がファイルを探しているときのデフォルトの挙動を修正します.
  • ignore-plugin:一部のファイルを無視するために使用されます.
    • 最適化に使う
  • commons-chunk-plugin:共通コードを抽出し、4-11で共通コードを抽出する際に紹介されています.
  • extract-text-webpack-plugin:JavaScriptのCSSコードを別個のファイルに抽出し、1-5でPluginを使用して紹介しています.
  • prepack-webpack-plugin:FacebookのPrepackを通じて出力を最適化するJavaScriptコード性能は、4-13でPrepackを使用して紹介されています.
  • glifyjs-webpack-plugin:UglifyESを通じてES 6コードを圧縮し、4-8圧縮コードに紹介されています.
  • webpack-parallel-glify-plugin:マルチプロセスはUglifyJSコード圧縮を行い、構築速度を向上させる.
  • イマジミン-webpack-plugin:画像ファイルを圧縮する.
  • webpack-spritesmith:スプライトをプラグインで作成します.
  • ModuleConcation Plugn:Webpack Scope Hoisting機能をオープンし、4-14 Scope Hoistingをオープンするときに紹介されています.
  • dll-plugin:DDLの思想を参考にして構築速度を大幅に向上させ、4-2でDllPluginを使用して紹介されています.
  • hot-module-replaccement-plugin:モジュール熱交換機能をオンにします.
    • その他
  • servicework-webpack-plugin:ウェブアプリケーションにオフラインキャッシュ機能を追加し、3-14オフラインアプリケーションを構築する際に紹介されています.
  • style int-webpack-plugin:統合stylelintプロジェクトには、3-16チェックコードに紹介されています.
  • i 18 n-webpack-plugin:あなたのホームページに国際化をサポートします.
  • provide-plugin:対応するファイルを導入することなく、環境で提供されるグローバル変数からモジュールをロードする.
  • web-webpack-plugin:便利なのは単ページアプリケーション出力HTMLで、html-webpack-pluginより使いやすいです.
    • bind()とcall/apply()方法の違いを深く理解する