[フロントエンド開発環境と実践]Webpack#4

👩‍💻 インフラストラクチャコース
Webpack Plugin

特定のテキストを乱読または抽出するためのバンドル結果

プラグインクラス

appply関数を実現し、パラメータとしてのコンパイラオブジェクトのtap()関数

を使用する

プラグイン完了時=Done

バンドルされた成果物へのアクセス=コンパイル

共通プラグイン
露出環境変数
webpack.config.js 👇

module.exports = {
  mode: "development",
}

console.log(process.env.NODE_ENV);

HtmlTemplatePlugin

サードパーティ製パッケージは、

をインストールする必要があります.

npm install html-webpack-plugin

HTMLファイルの後処理に用いる、構築時間値または圧縮コード

を入力する.

esj構文<%=env%>を使用して、受信したenv変数値を出力します.<title>검색<%= env %></title> => Title(개발용)

webpack.config.js 👇

const HtmlWebpackPlugin = require("html-webpack-plugin");

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 템플릿 경로를 지정
      templateParameters: { // 템플릿에 주입할 파라미터 변수 지정
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
      },
      minify: process.env.NODE_ENV === 'production' ? {
        collapseWhitespace: true, // 빈칸 제거
        removeComments: true // 주석 제거
      } : false
    })
  ]

CleanWebpackPlugin
リリース

以前の成果物(出力)

を削除

npm install clean-webpack-plugin

webpack.config.js 👇

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

new CleanWebpackPlugin ()

MiniCssExtractPlugin

スタイルシートコードのみを抽出し、個別のCSSファイルとする

npm install mini-css-extract-plugin

webpack.config.js 👇

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
          ? MiniCssExtractPlugin.loader // 프로덕션 환경
          : "style-loader", // 개발 환경
            "css-loader"
        ]
      }
   ]
}

...(process.env.NODE_ENV === 'production' // 프로덕션 환경일 경우만 이 플러그인을 추가
      ? [new MiniCssExtractPlugin({filename: '[name].css'})]
      : []
   )

** MiniCssExtractPlugin.loader:開発環境でstyle-loaderアプリケーションを使用してcss-loaderからJavaScriptモジュールに変更するスタイルシート.本番環境では、プラグインを適用して個別のCSSファイルとして抽出されるため、他のローダーが必要です.