Webpackの便利な小ネタ
概要
Webpackは、JavaScriptのモジュールバンドラーであり、複数のファイルを1つのJavaScriptファイルにまとめることができます。また、ローダーやプラグインなどの機能を使って、様々な処理を簡単に行うことができます。この記事では、Webpackをより便利に使うための小ネタをご紹介します。
1. externalsを使って外部ライブラリの取り扱いを簡単にする
外部ライブラリを含めたJavaScriptファイルをバンドルすると、ファイルサイズが大きくなってしまいます。また、同じライブラリを含むページが複数ある場合、重複して読み込まれることによって、パフォーマンスの低下や競合が発生することがあります。そこで、Webpackにはexternalsという設定があります。これを使うと、バンドル時に特定の外部ライブラリを含めないようにすることができます。
// webpack.config.js
module.exports = {
// ...
externals: {
jquery: 'jQuery',
lodash: {
commonjs: 'lodash',
amd: 'lodash',
root: '_'
}
}
};
上記の例では、jqueryとlodashをexternalsとして設定しています。jqueryはグローバル変数として定義されているため、'jQuery'として設定しています。一方、lodashはCommonJSモジュールとしてもAMDモジュールとしても利用できるため、それぞれcommonjsとamdを設定しています。さらに、lodashをグローバル変数としても利用できるように、rootとして'_'を設定しています。
2. DefinePluginを使って環境変数を使い分ける
WebpackにはDefinePluginというプラグインがあります。これを使うと、コード上に定数を定義することができます。環境変数や引数によって定義される値を定数として扱うことで、開発環境と本番環境でコードを切り替えることができます。
// webpack.config.js
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
})
]
};
上記の例では、'process.env.NODE_ENV'という変数を定義しています。この変数は、process.env.NODE_ENVという環境変数の値によって設定されるか、設定されていない場合は'development'という文字列が設定されます。
// sample.js
if (process.env.NODE_ENV === 'development') {
console.log('開発環境で実行しています');
} else {
console.log('本番環境で実行しています');
}
上記の例では、DefinePluginで定義した'process.env.NODE_ENV'を使って、開発環境と本番環境で実行される処理を変えることができます。
3. mini-css-extract-pluginを使ってCSSを分離する
Webpackには、style-loaderというローダーがあります。これを使うと、JavaScriptにCSSを埋め込むことができます。しかし、この方法では複数のCSSを分離することができません。そこで、mini-css-extract-pluginというプラグインを使ってCSSを分離することができます。
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[chunkhash].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
}
};
上記の例では、MiniCssExtractPluginでCSSを分離するように設定しています。分離されたCSSファイルは、'[name].[chunkhash].css'という名前で出力されます。
4. source-mapを有効にしてエラーを調べやすくする
Webpackには、ソースマップ（source-map）という機能があります。これを有効にすることで、バンドルされたJavaScriptファイルと、元のファイルを関連付けることができます。これにより、エラーが発生した際に、どのファイルのどの行でエラーが発生したかを正確に把握することができます。
// webpack.config.js
module.exports = {
// ...
devtool: 'source-map'
};
上記の例では、devtoolに'source-map'を設定して、ソースマップを有効にしています。この設定を行うと、バンドルされたJavaScriptファイルとソースマップファイルが出力されます。
5. 一部のモジュールを動的に読み込むことでページの読み込み時間を短くする
ページによっては、必要な機能がすべてを含むJavaScriptファイルを先に読み込むことで、ページの読み込み時間が増大してしまう場合があります。そこで、一部のモジュールだけを動的に読み込むことで、ページの読み込み時間を短くすることができます。
// sample.js
import('module').then((module) => {
// モジュールが読み込まれた後の処理
});
上記の例では、import関数を使って動的にモジュールを読み込んでいます。この場合、importされたモジュールは、そのモジュールが必要になった時点でダウンロードされます。これにより、必要なモジュールだけを読み込んでページの読み込み時間を短くすることができます。
まとめ
以上、Webpackをより便利に使うための小ネタをご紹介しました。外部ライブラリの取り扱い、環境変数の使い分け、CSSの分離、エラーの調査、動的モジュールの読み込みなど、多くの機能を使いこなすことで、より効率的に開発を進めることができます。