WebPack

7170 ワード
React webpack テキストリンク

プロジェクトの構造を分析し、JavaScriptモジュールを含む関連リソースを検索し、ブラウザで使用可能なバンドルパッケージにパッケージ化するモジュールbundler.
  • 詳細に指定されたプライマリ・ファイルからJavaScriptのrequire(webpack commonJSモジュール)を使用 サポート)とimport(ES 6)文を使用して、プロジェクトのすべての依存性を確認し、ローダを使用して処理し、バンドルされたJavaScriptファイルを作成します.

    • 登場背景

  • SPAフレームワークの出現に伴い,複雑なjsと大規模な依存性ツリーを有するWebアプリケーションが出現した.このような複雑さに対応するために、
  • は、1つのプログラムで実行される
    • である.
  • ファイルをコンパイルする場合、複数のモジュールを読み込むには長い時間がかかります.この問題を解決するために、複数のファイルをバンドルすることができます.
  • jsファイルを生成し、Webページのパフォーマンスを最適化します.(HTTPリクエストが少ない)

    • コアコンセプト

  • module
  • 再利用可能コードセグメント(jsファイル)
  • モジュールは、常にdeferプロパティが追加されたように動作を遅延します.(bodyの末尾に書く必要はありません)
  • モジュールはstrictモードで動作します.
  • モジュールには独自のスキャナーがあります.(file scope=module scope)→export、
    • をインポート可能
  • モジュールは、1回のみ評価(実行)し、必要な場所で共有します.
  • モジュールの最上位thisは定義されていません.
  • import.metaオブジェクトから情報を取得できます.(e.g. import.meta.url)
  • Bundle bundling:js、css、画像などのファイルパッケージングタスクbundle:タスクの成果物bundler:ファイルexをパッケージング)webpack
  • entry
  • dependency図の開始点
  • output
  • webpack生成bundleのエクスポート位置と名前
  • loader
  • wepackは基本的にjsとJSONファイルしか知りません
    →loader他のタイプのファイルを処理し、dependency graphに追加可能なモジュール
    • に変換する
  • プロパティtest:変換するファイルを指定use:変換を実行するときに使用するロードプログラムを指定
  • dependency図を描くと、テストで指定したファイルタイプが見つかりました.
    bundleを入れる前に、使用中に指定するローダ(前処理)
    • に変換する.
  • plug-in
  • コンパイルまたはモジュール処理を実行するために必要なタスクおよびカスタム機能
    • .

    使用方法

  • webpack.config.js 
    module.exports = {
    entry: './js/main.js',

    output: { 
        path: path.resolve(__dirname, 'dist'),
				filename: 'main.js',
        clean: true // 이전에 있던 것들은 사라지고 test.js만 번들된다
    },

    module: {
        rules: [ 
            {
                test: /\.s?css$/ , //정규표현식 사용
                use: [ 
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ]
            },

            {
                test: /\.js$/ ,
                use:{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
                    
                
            },
        ]
    },

    // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
    plugins: [
        new HtmlPlugin({ //dist의 main.js를 스크립트 파일로 포함하는 HTML 문서를 dist 폴더내에 자동 생성
            template: './index.html'
        }),
        new CopyPlugin({
            patterns: [
                { from: 'static' }
            ]
        })
    ],

    devServer : {
        host: 'localhost'
    }
}

    • 参考資料


    css-loader | webpack
    WebPackの下部から設定
    Webpackコンセプトのキャプチャ
    完全征服Webpack!
    React(5)練習項目
    UndoableEditListenerとDocumentListener