Bundler[Webpack] - plugins

7421 ワード
テキストリンク

プラグインとは?

  • 2webpackバンドルパッケージでサーバ開発に必要なパッケージを開く
    Webブラウザの標準機能を拡張するプログラム.

    • 02.プラグインのインストールと検証

    $ npm i -D html-webpack-plugin
  • 端末コマンドでプラグインをインストールします.
    • package.jsonファイル
    "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  }

    03.プラグインのインポート


    webpack.config.jsファイル
    const HtmlPlugin = require('html-webpack-plugin')
  • 2webpack.config.jsファイルに移動して、インストールされているプラグインを取得します.

    • 04.プラグインの設定

    const HtmlPlugin = require('html-webpack-plugin')

// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
plugins: [
  new HtmlPlugin({
    template: '.index.html'
    })
]
    webpack.config.jsファイル
    // import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    })
  ]
}
    配列データは、構成オプション
  • 2pluginsに作成される.
  • は、内部の構造関数によって変数HtmlPluginに符号化され、templateでindex.htmlファイルを指定する.
  • は、webpackのentryファイルを検索し、jsオプションを使用して生成された結果、outputのプラグインを使用する.

    • 05.オープン開発サーバ

    $ npm run dev
    開発サーバは
  • 端末鳴沢によりオープンしている.

    • 06.devServer


  • 開発サーバが正常に動作している間にエラーが発生する可能性があります.上図に示すように、pluginsに入る位置はlocalhostです.
    • この問題を解決するには、次のように::ファイルに開発サーバのホストを作成します.webpack.config.jsファイル
    // import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    })
  ],
  devServer: {
    host: 'localhost'
  }
}
    アルゴリズムベース2/1-401
    iPhoneユニットテスト(二)