Bundler[Webpack] - plugins

プラグインとは?

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'
  }
}