Webpackデータマイニング4-Plugin

以前の内容を復習する
皆さんが英語の試験の前に勉強していることを想像してみましょう.通常、以下の手順で学習します.

試験の本を準備します.

試験範囲がどこにあるか確認します.

冊の本を読みます.

他の参考書やインターネットを通じて知らない内容を検索します.

学習テストを選択したのは、Webpackが最終生成結果を完了するすべてのプロセスを含んでいるからです.次の手順を見て、以前の内容を復習しましょう.

開発進捗:コードの準備.

Entry:Webpackクリーンアップが必要な範囲を決定します.

Loader:Webpack.

Plugin:知らない内容のために参考書を準備する.

そう理解すればBundleプロセスは分かりやすいと思いますいかがでしたか?
Pluginとは?
ではLoaderに続いて最後のPluginを調べてみましょう前述したように、PluginはWebpackが学んでいないコンテンツや機能の代わりに、開発者が必要な結果を得るのに役立つライブラリです.設定をplugins keyにマッピングします.

plugins: [
	사용할 plugin 객체 1, 
    사용할 plugin 객체 2, 
    사용할 plugin 객체 3, 
]

create-actic-appを使用して開発する場合、通常使用する機能はPluginのメリットです.典型的なPluginには、HotLoadingまたはHotModuleと呼ばれるリロードPluginがあります.Webpack-dev-serverを起動し、コードの一部を変更して保存するとどうなりますか?ブラウザが再レンダリングされ、すぐに変更された情報が反映されます.この機能はHotModule Pluginが提供します.通常は、デプロイ環境で設定されたプラグインではなく、開発環境で設定されたプラグインです.次のように設定します.

plugins: [
		// Only update what has changed on hot reload
		new webpack.HotModuleReplacementPlugin()
	]

有用なPlugin 1-html-webpack-plugin
html-webpack-pluginはhtmlとwebpackの関係で働くpluginです.以前のloaderの文章を読んだら、何か変なところがあると思いませんか?すなわち、html−loaderはloaderには存在しない.なぜhtml-loaderは存在しないのですか?Reactに従って表示すると、Reactはhtmlファイルにdomをリンクし、domを処理して画面をレンダリングします.これは、コードが挿入されたhtmlが1つしかないことを意味します.したがって、webpackはhtmlファイルをloaderでバンドルする必要はありません.
今html-webpack-pluginの機能を感じることができますか?はい.html-webpack-pluginは、webpackのbundleをネックレスに渡してhtmlファイルに受け取る責任を負います.大文字にするhtmlファイルの場所、ファイルの情報、およびファイルを圧縮するかどうかを設定できます.

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

plugins: [
	new HtmlWebpackPlugin(
		Object.assign({},
			{
				filename: 'index.html', // output file name
				template: `public/index.html`, // file 위치
				inject: true // bundle 결과물 삽입
			},
			env.isProduction
				? {
						minify: {
							removeComments: true,
							collapseWhitespace: true,
							removeRedundantAttributes: true,
							useShortDoctype: true,
							removeEmptyAttributes: true,
							removeStyleLinkTypeAttributes: true,
							keepClosingSlash: true,
							minifyJS: true,
							minifyCSS: true,
							minifyURLs: true
						}
				  }
				: undefined
		)
	),
]

有用なPlugin 2-内挿html-plugin
plug-in-html-pluginは、htmlファイルでpackage script宣言の情報を使用できるplug-inです.create-react-appを初めて作成しindexを作成します.htmlを開くと、次のコードが表示されます.

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

注意して見ないと見えないかもしれませんが、変な顔をしていますね.そのPUBLIC URLはいったいどこから来たのでしょうか?直接梱包する.jsonのscriptからの情報.もちろん、ポップアップ後にwebpackでさらに宣言することもできます.package.jsonのscriptを見てみましょうか?

{
    "scripts": {
        "start": "PUBLIC_URL=https://www.google.com react-scripts start",
        "build": "PUBLIC_URL=https://www.google.com react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
}

以上のようにhtmlに設定されているPUBLIC URLは、Googleのホームページを指します.Pluginは内挿html-pluginであり,これを可能にした.次の設定を行います.

const InterpolateHtmlPlugin = require('interpolate-html-plugin');

plugins: [
	new InterpolateHtmlPlugin({
    	PUBLIC_URL: 'https://www.google.com
    }),
]

有用なPlugin 3-DefinePlugin
DefinePlugginのパッケージはinpluginの内挿html-pluginに似ています.私たちのjsコードではjsonのscriptコンテンツのPluginを使用できます.もしかすると過程.envを使ったことがありますか.通常buildタイプを決定する際に使用されます.例えばif(process.env.BUILD TYPE=="開発").次のように設定します.

plugins: [
	new webpack.DefinePlugin({
		'process.env': {
			BUILD_TYPE: JSON.stringify(process.env.BUILD_TYPE),
		}
	}),
]

有用なPlugin 4-mini-css-extract-plugin
mini-css-extract-pluginは、生成された成果物のcssファイルのクリーンアップを支援するpluginです.JSファイルの場合、webpackの出力設定中にファイル名を設定して成果物を作成できます.しかし、CSSはWebpackの基本機能としてJSファイルのように組織されていない.この場合、mini-css-extract-pluginを使用してヘルプを得ることができます.次のように設定します.

plugins: [
	new MiniCssExtractPlugin({
		filename: isDevelopment ? 'styles/[name].css' : 'styles/[name].[chunkhash].css',
		chunkFilename: isDevelopment ? 'styles/[id].css' : 'styles/[id].[chunkhash].css'
	}),
]

整理する
より多くのPluginがあるが,本稿ではまず開発に役立つPluginを紹介する.これから役に立つPluginをご紹介します.次の記事では、非開発導入の構築に役立つ最適化設定について説明します.