webpack.config.jsで設定できる項目のうち、公式のドキュメントでコアコンセプトとして記載されている項目を試してみます。
サンプルコード
まずはwebpack.config.jsを作成しない状態を試してみます。
プロジェクトディレクトリに移動後、package.jsonを作成して、webpackをインストールします。
npm install webpack webpack-cli --save-dev
プロジェクトディレクトリ内にsrcディレクトリを作成して、その中にindex.jsとgreeting.jsを作成します。
index.js
import { greet } from "./greeting";
console.log(greet('加藤'));
greeting.js
module.exports.greet = function(name) {
return name + 'さん こんにちは！';
}
この状態でビルドを行ってみます。
npx webpack
distディレクトリが生成され、その中にmain.jsが追加されました。
次にwebpack.config.jsを作成して項目を試してみます。
mode
“production”の場合は本番用にコードの圧縮、”development”の場合は開発用にソースマップを有効になった状態でファイルが出力されます。
初期値は”production”です。
webpack.config.jsを作成して、以下のように記述します。
module.exports = {
// "production"は本番用、"development"は開発用に最適化された状態でファイル出力
mode: "development"
};
main.jsが開発用の状態で出力されました。
entry
メインで使用するJavaScriptファイルのパスを指定する項目で、初期値は”./src/index.js”です。
例えばファイル名をindex.jsからentry.jsに変更したい場合、webpack.config.jsを以下のように変更します。
const path = require("path");
module.exports = {
// "production"は本番用、"development"は開発用に最適化された状態でファイル出力
mode: "production",
// メインで使用するJavaScriptファイルを指定
entry: path.resolve(__dirname, "src", "entry.js")
};
ちなみにpathはNodeの標準モジュールで、ファイルパスの操作に使用されます。
output
ビルド後の出力先とファイル名を指定する項目で、初期値は”./dist/main.js”です。
webpack.config.jsを以下のように変更して、ファイル名をscript.jsにしてみます。
const path = require("path");
module.exports = {
// "production"は本番用、"development"は開発用に最適化された状態でファイル出力
mode: "production",
// メインで使用するJavaScriptファイルを指定
entry: path.resolve(__dirname, "src", "entry.js"),
// ビルド後の出力指定
output: {
// 出力先のディレクトリ
path: path.resolve(__dirname, "dist"),
// 出力するファイル名
filename: "script.js"
}
};
module(Loaders)
CSSや画像ファイルなど、JavaScript以外のファイルをwebpackで処理できるようにする項目です。
今回はCSSを処理できるようにしてみいます。
CSSの処理に必要なプラグインをインストールします。
npm install style-loader css-loader --save-dev
srcディレクトリ内にstyle.cssを追加します。
html {
background: orange;
}
entry.js内でstyle.cssをインポートします。
import { greet } from "./greeting";
console.log(greet('加藤'));
import "./style.css";
webpack.config.jsにCSSの処理を追記します。
const path = require("path");
module.exports = {
// "production"は本番用、"development"は開発用に最適化された状態でファイル出力
mode: "production",
// メインで使用するJavaScriptファイルを指定
entry: path.resolve(__dirname, "src", "entry.js"),
// ビルド後の出力指定
output: {
// 出力先のディレクトリ
path: path.resolve(__dirname, "dist"),
// 出力するファイル名
filename: "script.js"
},
// 処理対象のファイル追加
module: {
rules: [
{
// 処理対象のファイルの指定
test: /\.css/,
// 変換で使用するローダーを指定
use: [
"style-loader", "css-loader"
]
}
]
}
};
ビルドして生成されるscript.jsを読み込んでみると、CSSが取り込めていることが確認できます。
コード内のコメントにも記載していますが、testプロパティで処理対象のファイル拡張子を指定、usedプロパティで変換時に使用するローダーを指定しています。
plugins
webpackで実行できるタスクを追加する項目です。
例として、ビルドしたファイルををscriptタグで読み込んだHTMLを生成するプラグインを使ってみます。
npm install html-webpack-plugin --save-dev
srcディレクトリ内にindex.htmlを追加します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <p>テストです。</p> </body> </html>
webpack.config.jsを下記に変更します。
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// "production"は本番用、"development"は開発用に最適化された状態でファイル出力
mode: "production",
// メインで使用するJavaScriptファイルを指定
entry: path.resolve(__dirname, "src", "entry.js"),
// ビルド後の出力指定
output: {
// 出力先のディレクトリ
path: path.resolve(__dirname, "dist"),
// 出力するファイル名
filename: "script.js"
},
// 処理対象のファイル追加
module: {
rules: [
{
// 処理対象のファイルの指定
test: /\.css/,
// 変換で使用するローダーを指定
use: [
"style-loader", "css-loader"
]
}
]
},
// プラグイン追加
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
}),
]
};
ビルドを行うと、distディレクトリ内にindex.htmlが生成されました。
コメントが承認されるまで時間がかかります。