wp-envでのビルドツールをRspackへの移行してみる
プロジェクトをRspack化する方法
この記事では、wp-env 環境下でのビルドツールを Rspack に移行する手順について、備忘録としてまとめています。
Rspackは、ビルド時間を短縮し、開発者により効率的な体験を提供する 最新のJavaScriptバンドラー です。
この記事では、Rspackのセットアップや使い方、Webpackからの移行方法について詳しく解説します。
また、Rspackをさらに活用するために、JavaScriptランタイム Bun を使って高速なパッケージ管理やビルドを行うので、事前にBunのインストールもお忘れなく！
なぜRspackなのか？
Rspackは、従来のバンドラーである Webpack の高速な代替手段として設計されています。
特に以下の点で優れています：
- 高速なビルド時間：最適化されたアーキテクチャにより、ビルドが非常に速い。
- 最新の機能：CSSやTypeScriptの組み込みサポートなど、モダンな開発をサポート。
- 使いやすさ：Webpackに似た設定スタイルなので、移行もスムーズ。
パッケージのインストール
まず、プロジェクトで必要なパッケージをインストールしましょう。Bun を利用して、高速にインストールできます。
bun add -D typescript sass sass-loader sass-embedded @rspack/cli @rspack/core @types/node autoprefixer css-loader postcss postcss-loader tailwindcss
TailwindCSSやPostCSSを使用しない場合は、適宜パッケージリストから削除してください。
Rspackのセットアップ
次に、Rspackの設定ファイルである rspack.config.ts を作成します。
このファイルは、Webpackと同様にエントリポイントや出力先、プラグインの設定を記述するもので、Rspack用に最適化されています。
以下が基本的な設定例です。
import path from "node:path";
import type { Configuration } from "@rspack/cli";
import { CopyRspackPlugin, CssExtractRspackPlugin } from "@rspack/core";
const mode =
process.env.NODE_ENV === "production" ? "production" : "development";
const config: Configuration = {
mode: mode,
devtool: mode === "development" ? "source-map" : false,
experiments: {
css: true,
},
entry: {
main: ["./src/ts/index.ts"],
},
output: {
path: path.join(__dirname, "./wordpress/themes/dist/assets/"),
filename: "js/index.js",
clean: true,
},
watch: mode === "development",
watchOptions: {
aggregateTimeout: 300,
poll: true,
},
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
loader: "builtin:swc-loader",
options: {
jsc: {
parser: {
syntax: "typescript",
},
},
},
type: "javascript/auto",
},
{
test: /\.(css|scss)$/,
use: [
CssExtractRspackPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
api: "modern-compiler",
implementation: require.resolve("sass-embedded"),
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
],
type: "javascript/auto",
},
],
},
plugins: [
new CopyRspackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src/img"),
to: path.resolve(__dirname, "wordpress/themes/dist/assets/img"),
},
],
}),
new CssExtractRspackPlugin({
filename: "css/index.css",
}),
],
};
export default config;
この設定では、TypeScriptやSass、TailwindCSSのサポートを含んでいます。
必要に応じて、自分のプロジェクトに合わせたカスタマイズを行いましょう。
プロジェクトの実行
Rspackの設定が完了したら、次にプロジェクトのビルドスクリプトを追加します。
package.json に以下のスクリプトを追加しましょう。
"build": "rspack --config rspack.config.ts --mode production",
"watch": "rspack --watch --config rspack.config.ts --mode development",
build コマンドで本番用のバンドルを作成し、watch コマンドで開発モードでのリアルタイムビルドを行います。
まとめ
Rspackを使うことで、従来のWebpackに比べてビルド時間が大幅に短縮され、開発効率が向上します。Webpackからの移行も比較的スムーズに行えるため、試してみる価値があります。
もし改善点やおすすめの設定があれば、ぜひ教えてください！
公式ドキュメントも参考にしつつ、今後もRspackを活用していきましょう。
Discussion