webpack包装-----plugin
14449 ワード
なぜプラグインを使うのですか? loaderとpluginの違い loader plugin よくあるplugin clean-webpack-plugin html-webpack-plugin copy-webpack-plugin カスタムplugin開発----- loaderとpluginの違い
loader
loader:主にモジュールのソースコードの変換に用いられます.webpack自体はjs処理だけをサポートしていますので、loaderはwebpackがどのように非javascriptモジュールを処理するかを説明しました.そして、buildにこれらの依存を導入しました.loaderは、ファイルを異なるcss前処理からcssに変換し、tsをJavaScriptに変換したり、インライン画像をdata URLに変換したりすることができる.例えば、sass-loader、cs-loader、style-loader、file-loaderなどです.loaderの本質は一つの間の配管です.
plugin
pluginはloaderでは実現できない他のことを解決し、パッケージ最適化と圧縮から環境変数を再定義するまで、様々なタスクを処理する機能が強いです.
よくあるplugin
clean-web pack-plugin
リソースファイルをクリア
包装結果bundle.jsを使ったHTMLを自動的に生成します.
静的リソースコピー
プラグイン機能:パッケージ結果の余計なコメント情報Pluginをクリアすることは、フック機構により実現されます.webpackはプラグインpluginが関数である必要があります.または、applyメソッドを含むオブジェクトである必要があります.通常、pluginをclassとして定義し、その後、classでアプリを定義します.pluginは一つの関数またはappy方法を含むオブジェクトである必要があります.参加はcomplerオブジェクトで、構築に必要な情報を含んでいます.開発時にcomplerの中のhooks属性を通じてemitフックにアクセスできます.そして、tap方法でフック関数を登録して、フック名とマウント関数をカスタマイズします.この関数はcomplationパッケージのコンテキストに組み込まれ、complationの下のクラスメイトのすべてのキーを介してすべてのファイル名を取得します.キーのsource()方法によって対応するcontentコンテンツを取得し、contentをいくつか処理して、souce関数に戻してプラグインの目的を達成します.
loader
loader:主にモジュールのソースコードの変換に用いられます.webpack自体はjs処理だけをサポートしていますので、loaderはwebpackがどのように非javascriptモジュールを処理するかを説明しました.そして、buildにこれらの依存を導入しました.loaderは、ファイルを異なるcss前処理からcssに変換し、tsをJavaScriptに変換したり、インライン画像をdata URLに変換したりすることができる.例えば、sass-loader、cs-loader、style-loader、file-loaderなどです.loaderの本質は一つの間の配管です.
plugin
pluginはloaderでは実現できない他のことを解決し、パッケージ最適化と圧縮から環境変数を再定義するまで、様々なタスクを処理する機能が強いです.
よくあるplugin
clean-web pack-plugin
リソースファイルをクリア
const {
CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin();
]
}
包装結果bundle.jsを使ったHTMLを自動的に生成します.
const {
CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');// ， htmlWebpackPlugin
module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: [/node_modules/], // js
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),// ， html index.html
new HtmlWebpackPlugin({
title: 'webpack plugin sample',// title
meta: {
viewport: 'width=device-width, initial-scale=1.0',
},
template: './src/index.html' //
}),
new HtmlWebpackPlugin({
filename: 'about.html'// about.html
})
]
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
body>
html>
静的リソースコピー
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
new CopyWebpackPlugin(['public'])
]
プラグイン機能:パッケージ結果の余計なコメント情報Pluginをクリアすることは、フック機構により実現されます.webpackはプラグインpluginが関数である必要があります.または、applyメソッドを含むオブジェクトである必要があります.通常、pluginをclassとして定義し、その後、classでアプリを定義します.pluginは一つの関数またはappy方法を含むオブジェクトである必要があります.参加はcomplerオブジェクトで、構築に必要な情報を含んでいます.開発時にcomplerの中のhooks属性を通じてemitフックにアクセスできます.そして、tap方法でフック関数を登録して、フック名とマウント関数をカスタマイズします.この関数はcomplationパッケージのコンテキストに組み込まれ、complationの下のクラスメイトのすべてのキーを介してすべてのファイル名を取得します.キーのsource()方法によって対応するcontentコンテンツを取得し、contentをいくつか処理して、souce関数に戻してプラグインの目的を達成します.
class MyPlugin {
// apply ， webpack
// compiler
// webpack ， ，
//
apply(compiler) {
// compilation: ，
//
compiler.hooks.emit.tap('MyPlugin', compilation => {
// compilation.assets
// compilation.assets ， bundle.js, index.html, favicon.ico 。。。
// source compilation[name].source();
for (const name in compilation.assets) {
if (name.endsWith('.js')) {
//
const contents = compilation.assets[name].source();
const withoutComments = contents.replace(/\/\*\*+\*\//g, '');
//
compilation.assets[name] = {
// source
source: () => withoutComments,
// ， webpack
size: () => withoutComments.length;
}
}
}
})
}
}
//webpack.config.js Myplugin
const Myplugin = require('./Myplugin')
plugins: [
new MyPlugin()
]