継続的なアップデートにご期待ください。
1.なぜwebpackを使いこなす必要があるのですか？
フロントエンド開発において、webpackはアプリケーションのシナリオや開発手法と密接に関係しています。今、フロントエンドは、PCのWeb開発を行うだけでなく、様々なモバイルデバイスの普及に伴い、フロントエンドは、Web開発のさまざまな異なる解像度を考慮する必要があります。したがって、異なるシナリオのために別のパッケージを行うことが特に重要です。例えば、社内のミドルシステムやバックエンドシステムでは、シングルページのアプリケーションをパッケージ化する必要がありますが、外部ユーザー向けのh5アプリケーションでは、通常パフォーマンスを重視するため、サーバーサイドレンダリングやPWAのオフラインキャッシュをサポートするパッケージを構築する必要があります。一方、npmのますます繁栄今日では、Webpackを介して迅速に開発プロセスを加速するために、優れた成熟したプラグインの様々な再利用することができます。最後のポイントは、現在の人気のフロントエンドの3つの主要なフレームワークは、JSXやVueディレクティブなど、ブラウザが直接解決することはできませんが、また、変換するためのツールを構築する必要があります。そして、webpackは、リーダーでパッケージ化ツールを構築することです。webpackを学ぶことで、技術スタックを広げることができ、問題を発見し、パッケージ化の過程で、すぐに問題を見つけることができます。
では、さっそくwebpackを学んでいきましょう。
2.webpackの基本的な使い方
2.1 webpackのエントリ
エントリは、webpackのパッケージングエントリを指定するために使用されます。
webpackはモジュールパッカーであるため、webpackではすべてをモジュールとして扱い、いくつかのモジュールは互いに何らかの依存関係を持つため、webpackはエントリファイルに基づいて依存関係を探し、依存関係ツリーを生成し、依存関係ツリーに基づいてリソースをパッケージ化します。
単一エントリ: エントリは文字列
シングルページのアプリケーションの場合、つまり、1つのプロジェクトにエントリーファイルは1つだけです。
module.exports = {
entry: './src/main.js'
};
複数エントリ：エントリはオブジェクト
複数ページのアプリケーションに最適
module.exports = {
entry: {
app1: './src/app1.js',
app2: './src/app2.js'
}
};
2.2 webpackの出力
output は、コンパイルしたファイルをディスクに出力する方法を webpack に指示するために使用します。
単一エントリーのシナリオでは、以下のように ファイル名と パスの フィールドを指定するだけです：
module.exports = {
entry: './src/main.js',
output: {
filename: 'index.js',
path: _dirname + '/dist'
}
}
複数エントリーのシナリオでは、以下のようにプレースホルダ[name]を使用することで、ファイル名が一意であることを保証できます：
module.exports = {
entry: {
app1: './src/app1.js',
app2: './src/app2.js'
}
output: {
filename: '[name].js',
path: _dirname + '/dist'
}
}
2.3 webpackローダー
webpackはJSとJSONしかサポートしていないため、Loadersを使用して他のファイルタイプをサポートし、依存グラフに追加できる有効なモジュールに変換する必要があります。
Loadersは基本的に、ソースファイルをパラメータとして受け取り、次のステップで使用する変換結果を返すメソッドです。
ローダーはモジュールフィールドで設定し、ルールは複数のローダーに設定できる配列です。
test マッチング・ルールを指定します。
use 使用するローダーの名前を指定します。
module.exports = {
module: {
rules: [
{
test: /\.css/,
use: 'css-loader'
}
]
}
}
一般的なローダー。
css-loader : .css ファイルを読み込み、commonJs オブジェクトに変換します。
style-loader : css-loaderの解析された内容をスタイルタグの形でheadに挿入します。
sass-loader : sassファイルをcssに変換します。
babel-loader : ES6以降の新しいJS構文の変換
file-loader : イメージ、フォント、その他のリソースをパッケージ化します。
url-loader：とfile-loaderの機能は似ていますが、さらに、小さいイメージを自動的にbase64に変換するように設定することができます。
以下のように設定できます：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|svg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240
}
}
]
}
]
}
}
thread-loader : JSとCSSのマルチプロセスパッケージング
raw-loader : ファイルを文字列としてインポートします。
延長：
loaderの呼び出しはチェーン呼び出しで、実行順序は右から左へ、Webpackがsassファイルを解析する例として、最初に使用するsass-loaderはsassファイルをcssファイルに変換し、次にcss-loaderを使用して変換されたcssファイルをロードし、最後にstyle-loaderを使用してcss-loaderの後に解析します。最後にstyle-loaderを使用して、css-loaderで解析された内容をスタイルタグの形式でheadに挿入します。
module.exports = {
module: {
rules: [
{
test: /\.css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
2.3 webpackプラグイン
一般的なプラグイン。
ZipWebPackPlugin : パッケージ化されたリソースからzipパッケージを生成します。
HtmlWebPackPlugin : 出力用のhtmlファイルを作成するバンドルです。
CleanWebPackPlugin : ビルド・ディレクトリのクリーンアップ
CommonsChunkPlugin : 同じモジュールのコードの塊をpublic jsに抽出します。
UglifyWebPackPlugin : 圧縮JS
プラグインはwebpackで以下のように設定します：
module.exports = {
plugins: [
new HtmlWebPackPlugin({template: './src/index.html'})
]
}
