[開発環境]webpack(2)

3937 ワード
テキストリンク

ローダ


WebパッケージはJavaScriptモジュールとしてのみならず、スタイルシート、画像、fontのすべてのモジュールとしても表示されるため、import構文を使用してJavaScriptコードにインポートできます.
このとき,それを可能にしたのはWebPackの로더である.
// app.js:
import './common.css';

console.log('Hello World');
/* common.css: */
body {
  background-color: black;
}

カスタム・ローダーの作成


ロードプログラムの動作を理解するために、
コンソールを例として使用します.log(部分をalertに変換)のカスタムロードプログラムを作成しました.
// myloader.js:
module.exports = function myloader(content) {
	// console.log( -> alert( 로 치환
    return content.replace("console.log(", "alert(")
}
  • ファイルの内容はパラメータによって渡されます.

    • カスタム・ローダーの適用


    ローダーを使用するには、モジュールオブジェクトをWebパッケージ設定ファイルに追加します.
    // webpack.config.js:
 module: {
    rules: [{
      test: /\.js$/, //js 확장자로 끝나는 모든 파일을 의미
      use: [path.resolve('./myloader.js')] // 생성한 로더 적용
    }],
  }
  • テスト:アプリケーション・ロードするファイルのタイプ(通常は正規表現を使用)
    • を指定します.
  • を使用:ファイルに適用するローダ
    • を設定する
    Custom Loaderの実行時

    Custom Loaderを使用してコンソールを行います.log->alertを使用して、変更後の結果を表示できます.

    Loaderの動作原理をCustom Loaderで理解し、次にスタイルシート、画像などのロード方法を理解します.

    Reference

  • https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html
    • メソッドの概念
    BOJ 16472古猫