#2023 ブログスターの選考が始まりました - 都市のリーダーになるために #
目次
Webpack を始める
Webpack は、最新の JavaScript アプリケーション用の静的モジュール バンドラーです。Webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらすべてのモジュールを 1 つ以上のバンドルにパッケージ化します。
入門
始める前に、Node.js と npm がすでにインストールされていることを前提としています。次に、簡単なサンプル プロジェクトを作成して、webpack の基本概念を説明します。
インストール
まず、プロジェクトのルートとして新しいフォルダーを作成する必要があります。ルート ディレクトリでコマンド ラインを開き、次のコマンドを入力して新しい npm プロジェクトを初期化します。
npm init -y
次に、webpack とその CLI ツールをインストールする必要があります。
npm install webpack webpack-cli --save-dev
エントリーファイルの作成
ルート ディレクトリにsrcという名前のフォルダーを作成し、index.jsその中に という名前のファイルを作成します。これがエントリ ポイント ファイルとなり、webpack が依存関係グラフの構築を開始します。
// src/index.js
console.log('Hello, webpack!')
設定ファイルを作成する
次に、webpack にプロジェクトの処理方法を指示する webpack 構成ファイルを作成する必要があります。
ルート ディレクトリに という名前のファイルを作成しwebpack.config.js、次の内容を追加します。
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
この設定ファイルは、エントリ ポイント ファイルの場所src/index.jsと出力先をwebpack に伝えますdist/bundle.js。
プロジェクトを構築する
これでプロジェクトをビルドできるようになりました。コマンドラインに次のコマンドを入力します。
npx webpack
これにより、webpack コマンドが実行され、作成したばかりの構成ファイルを使用してプロジェクトがビルドされます。すべてがうまくいけば、コンソールに「Hello, webpack!」という出力が表示されるはずです。
npmスクリプトを使用する
実際のプロジェクトでは、通常、コマンド ラインに手動で入力するのではなく、npm スクリプトを使用して webpack コマンドを実行します。
package.jsonファイルを開き、build次のようにスクリプトを追加します。
{
"scripts": {
"build": "webpack"
}
}これで、次のコマンドを使用してプロジェクトをビルドできます。
npm run build
ローダー ローダー
Webpack 自体は JavaScript モジュールのみを理解しますが、ローダーを使用して他の種類のファイルを認識させることができます。
たとえば、JavaScript で CSS ファイルをインポートする場合は、css-loaderと を使用する必要がありますstyle-loader。
ローダーをインストールする
css-loaderとインストールできますstyle-loader。
npm install css-loader style-loader --save-dev構成ローダー
Webpack 構成ファイルに次のルールを追加して、Webpack に CSS ファイルの処理方法を指示します。
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
.cssこの設定は、 で終わるファイルを検出すると、まず をcss-loader使用して CSS を JavaScript モジュールに変換し、次に をstyle-loader使用してそれを HTML に挿入することを webpack に指示します。
CSSファイルをインポートする
これで、CSS ファイルを JavaScript にインポートできるようになりました。
import './styles.css';
Webpack は CSS をページに自動的に読み込みます。
プラグイン
ローダーはさまざまな種類のファイルの処理を担当し、プラグインを使用してさまざまなタスクを実行できます。たとえば、 を使用してHtmlWebpackPluginHTML ファイルを自動的に生成し、出力バンドルを HTML ファイルに自動的に挿入できます。
プラグインをインストールする
npm を使用してインストールできますHtmlWebpackPlugin。
npm install html-webpack-plugin --save-dev
プラグインを設定する
次のコードを Webpack 構成ファイルに追加します。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: 'src/index.html'
})
]
};
この設定は、 を使用して HTML ファイルを自動的に生成することを webpack に伝えますHtmlWebpackPlugin。テンプレート ファイルとページ タイトルを指定することもできます。
テンプレートファイルを作成する
src フォルダー内に という HTML テンプレート ファイルを作成しますindex.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
このテンプレート ファイルは、生成される HTML ファイルの基礎として機能します。
プロジェクトを構築する
npm run buildこれで、コマンドを実行してプロジェクトをビルドできるようになりました。すべてがうまくいけば、distフォルダー内に生成された HTML ファイルと JavaScript ファイルが表示されるはずです。
結論は
この記事では、Webpack、ローダー、プラグインの基本概念を紹介し、簡単なサンプル プロジェクトを通じてそれらを使用してフロントエンド プロジェクトを構築する方法を示します。
Webpack は、依存関係を自動的に処理し、すべてのファイルを 1 つ以上のバンドルにパッケージ化する強力なツールです。学習曲線は急峻ですが、基本概念をマスターすれば、フロントエンド プロジェクトを非常に効率的に開発できるようになります。