人気のウェブパックプラグイン2022年

Use the right tool, for the right job, in the right way

我々が正しいツールを利用できるならば、発展はより簡単になります.このポストでは、我々はほとんど準備ができている反応のためにほとんど使用される若干の人気のWebpackプラグインについて議論します.アプリケーションビルドプロセス.
この記事は以前のブログ記事の一部を拡張しました.
WebPackについて知りたい場合は、簡単な手順で反応アプリケーションとの設定は、あなたが読むことができます.
私が個人的に私の反応アプリケーションのために使うプラグインは、ここにあります:

webpackダッシュボード

デフォルトのWebpackのビルドプロセスの出力は以下のようになります.

上記の出力を読むことと理解することは困難です.また、情報はよくフォーマットされ、提示されません.
ここでWebpackダッシュボードは、出力のより良い視覚を持つために、絵に来ます.CMDでコマンドを入力してインストールします.

npm install --save-dev webpack-dashboard

注意: Webpackダッシュボード@ ^ 3.0.0はノード8以上を必要とします.以前のバージョンは、ノード6をサポートします.
さて、このプラグインをWebpackにインポートする必要があります.設定.JSとアドインプラグインの配列.

//webpack.config.js

const path = require('path');
const webpackDashboard = require('webpack-dashboard/plugin');
module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
      ]
   },
   plugins:[
       new webpackDashboard()
   ]
}

また、パッケージ内のスクリプトを変更する必要があります.JSONちょうどすべてのスクリプトの前にWebpackダッシュボードを追加する必要があります.そして、すべてが完了!

"scripts": {
    "start": "webpack-dashboard -- webpack serve --mode development --open --hot",
    "build": "webpack-dashboard -- webpack --mode production"
  }

アプリケーションを実行し、素晴らしいビルドプロセスの出力が表示されます.😍

プラグインのプラグイン

terser webpackプラグインは、JavaScriptバンドルのサイズを圧縮するために使用されます.また、このプラグインはES 6 +最新のJavascript構文をサポートします.
注:デフォルトでterser webpackプラグインは、ウェブパック5が付属しています.このプラグインは、WebPackバージョンが5より小さいときにのみ必要です.
以下のコマンドを使ってこのプラグインをインストールします.

npm install --save-dev terser-webpack-plugin

次に、このプラグインをウェブパックにインポートして追加します.設定.js

//webpack.config.js

const path = require('path');
const webpackDashboard = require('webpack-dashboard/plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin()],
    },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
      ]
   },
   plugins:[
       new webpackDashboard()
   ]
}

このプラグインで利用可能なオプションはたくさんあります.

ヒア 最適化CSSの資産

このプラグインは、プロジェクト内のすべてのCSSファイルを検索し、CSSを最適化/縮小します.
このプラグインをインストールします

npm install --save-dev optimize-css-assets-webpack-plugin mini-css-extract-plugin css-loader

このプラグインをウェブパックでインポートして追加します.設定.js

//webpack.config.js

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require('webpack-dashboard/plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
    },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
         }, 
      ]
   },
   plugins:[
       new webpackDashboard(),
       new MiniCssExtractPlugin(),
       new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.optimize\.css$/g,
         cssProcessor: require('cssnano'),
         cssProcessorPluginOptions: {
           preset: ['default', { discardComments: { removeAll: true } }],
         },
         canPrint: true
       })
   ]
}

CSS資産Webpackプラグイン の最適化についての詳細を読むことができます.

ヒア ウェブプラグイン

HTML Webpackプラグインは、HTMLファイルを生成し、JavaScriptコードを使用してスクリプトタグを注入するために使用されます.このプラグインは、開発と生産の両方に使用されます.
このプラグインをインストールします

npm install --save-dev html-webpack-plugin

このプラグインをウェブパックでインポートして追加します.設定.js :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require('webpack-dashboard/plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
    },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
       {
         test: /\.css$/i,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
     }, 
      ]
   },
   plugins:[
       new HtmlWebpackPlugin(
         Object.assign(
           {},
           {
             inject: true,
             template: path.join(__dirname,'/src/index.html')
           },

           // Only for production
           process.env.NODE_ENV === "production" ? {
             minify: {
               removeComments: true,
               collapseWhitespace: true,
               removeRedundantAttributes: true,
               useShortDoctype: true,
               removeEmptyAttributes: true,
               removeStyleLinkTypeAttributes: true,
               keepClosingSlash: true,
               minifyJS: true,
               minifyCSS: true,
               minifyURLs: true
             }
           } : undefined
         )
       ),
       new webpackDashboard(),
       new MiniCssExtractPlugin(),
       new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.optimize\.css$/g,
         cssProcessor: require('cssnano'),
         cssProcessorPluginOptions: {
           preset: ['default', { discardComments: { removeAll: true } }],
         },
         canPrint: true
       })
   ]
}

HTML WebPackプラグイン によって提供されるオプションについての詳細を読むことができます.

ヒア プラグインのクリーン

きれいなWebpackプラグインは、あなたのbuildフォルダをきれいにする/削除するのに用いられます.また、すべての未使用のウェブパックの資産を削除するすべての成功再構築後.
このプラグインは、不要なファイルや資産を生産準備フォルダから削除することで、バンドルサイズを削減するのに役立ちます.
このプラグインをインストールします

npm install --save-dev clean-webpack-plugin

このプラグインをウェブパックにインポートして追加します.設定.js :

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require("webpack-dashboard/plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
  },
  devServer: {
    port: 8080,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          template: path.join(__dirname, "/src/index.html"),
        },

        // Only for production
        process.env.NODE_ENV === "production"
          ? {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            }
          : undefined
      )
    ),
    new webpackDashboard(),
    new MiniCssExtractPlugin(),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: {
        preset: ["default", { discardComments: { removeAll: true } }],
      },
      canPrint: true,
    }),
    new CleanWebpackPlugin({
      // Use !negative patterns to exclude files
      // default: []
      cleanAfterEveryBuildPatterns: ["static*.*", "!static1.js"],

      // Write Logs to Console
      // (Always enabled when dry is true)
      // default: false
      verbose: true,
    }),
  ],
};

NPMの実行ビルドを実行した後、distフォルダの下にあるすべてのファイルが削除され、必要なファイルだけが起動され、tempを取得した後に確認できます.それはどんなファイルの参照を持っていないので、jsは削除されます.

Thanks for reading this blog post. Feel free to comment in comment box if you face any problem while configuring these plugins with webpack.

場合は、この記事は、お友達や同僚と共有してください有用な発見!❤️
記事を読む➡️
フォローミーオン⤵️
🌐
🌐