Web制作に携わるすべての方が楽になるように、Webpack5を利用した開発環境のテンプレートを用意しましたのでご紹介します。
静的なサイトを HTML ＆ CSS で作成する場合、初めは手間だと感じるかもしれませんが、最初にビルド設定をしておくことで、自動でコードの記述ミスを見つけてくれるようになるので開発効率をあげることができます。
SCSS や Typescript といったモダンなコードを使って開発することが出来て、記述したコードは自動的に ブラウザで解釈可能なコードに変換してくれます。
また、作成したWebページは Githubにコミット＆プッシュすることで、自動的に Github Pages に公開されて閲覧することも出来るようにしています
今後、Web制作をされる際のテンプレートとしてご利用頂ければ幸いです。
このテンプレートで出来ること
- 複数のHTMLファイルを一元的に管理することが出来ます。
- Sassで記述したコードを自動でCssに変換してくれます
- Typescript（ESNext）で記述したコードを自動でJavascript（es5）に変換してくれます。
- ESLintでコードの記述に誤りがある場合に自動で見つけてくれます。
- Prettierでインデントなどコードの体裁を自動でフォーマットしてくれます。
- 生成されたCSSやJSのコードは圧縮されていて小さなサイズにしてくれます。
- Githubにコミット＆プッシュすると自動的にGithubPageに公開されます。
利用している技術
- Webpack5
- Sass
- Typescript
- ESLint
- Prettier
- Github Actions
利用するまでの手順
ディレクトリ構成
. ├── LICENSE ├── README.md ├── dist ├── node_modules ├── package.json ├── src │ ├── @types │ ├── assets │ ├── blog.html │ ├── company.html │ ├── index.html │ └── ts │ ├── blog.ts │ ├── company.ts │ └── index.ts ├── tsconfig.json ├── webpack.common.js ├── webpack.dev.js ├── webpack.prod.js └── yarn.lock
こちら から「use this template」をクリックして自分のGithubリポジトリに複製します。複製したGithubリポジトリからローカルにダウンロードして利用してください。
# Node.jsのバージョンを確認します（v16を推奨します） $ node -v v16.13.1 # モジュールをインストールします $ npm install -g yarn $ yarn # ブラウザを起動して作成したHTMLを表示します。 $ yarn start:dev
生成するWebページのエントリポイントを設定する
利用しているWebpackPlugin
- clean-webpack-plugin ・・・ コンパイル毎に出力先フォルダ内を削除する
- html-webpack-plugin ・・・ 複数のhtmlファイルを動的に出力する
- webpack-watched-glob-entries-plugin ・・・ entryオプションをglobで複数指定する
- mini-css-extract-plugin ・・・ CSSを別ファイルに書き出す
webpack.common.js にエントリポイントとなるTSファイルとHTMLファイルのマッピングを指定していますので必要に応じて編集してください。
webpack.common.js
const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackWatchedGlobEntries = require('webpack-watched-glob-entries-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const entries = WebpackWatchedGlobEntries.getEntries([path.resolve(__dirname, './src/ts/**/*.ts')], {
ignore: path.resolve(__dirname, './src/ts/**/_*.ts'),
})();
// './src/ts/**/*.ts'にあるエントリーファイルをHTMLファイルにマッピングしています。
// 必要に応じて適宜以下の記述を修正してください。
const htmlGlobPlugins = (entries, srcPath) => {
return Object.keys(entries).flatMap(
(key) => [
new HtmlWebpackPlugin({
inject: 'body',
filename: `${key}.html`,
template: `${srcPath}/${key}.html`,
chunks: [key],
})
]
);
};
module.exports = (outputFile) => ({
entry: entries,
output: {
path: path.resolve(__dirname, './dist'),
filename: `./js/${outputFile}.js`,
},
devServer: {
port: 3000,
open: true,
},
module: {
rules: [
{
// 拡張子 .ts の場合
test: /\\.ts$/,
// TypeScript をコンパイルする
use: 'ts-loader',
},
{
test: /\\.(sa|sc|c)ss$/i,
use: [
// cssファイルとして別ファイルに出力する
MiniCssExtractPlugin.loader,
// cssをCommonJS形式に変換してjavaScriptで扱えるようにする
'css-loader',
{
// PostCSSでcssを処理する
loader: 'postcss-loader',
options: {
postcssOptions: {
// ベンダープレフィックスを自動付与する
plugins: [require('autoprefixer')({grid: true})],
},
},
},
{
// sassをコンパイルしてcssに変換する
loader: 'sass-loader',
options: {
// Dart Sassを使えるようにする
implementation: require('sass'),
},
},
],
},
{
test: /\\.html$/i,
loader: 'html-loader',
},
{
test: /\\.(png|jpe?g|gif|svg)$/i,
generator: {
filename: `./image/[name].[contenthash][ext]`,
},
type: 'asset/resource',
},
],
},
// import 文で .ts ファイルを解決するため
// これを定義しないと import 文で拡張子を書く必要が生まれる。
// フロントエンドの開発では拡張子を省略することが多いので、
// 記載したほうがトラブルに巻き込まれにくい。
resolve: {
// 拡張子を配列で指定
extensions: [
'.ts', '.js',
],
},
plugins: [
new CleanWebpackPlugin(),
new WebpackWatchedGlobEntries(),
new MiniCssExtractPlugin({
filename: `./css/${outputFile}.css`,
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
...htmlGlobPlugins(entries, './src'),
],
});
ソースコード
MIT ライセンスにてコードを公開していますのでご利用の方は以下のURLからForkしてご利用下さいませ。
https://github.com/isystk/webpack5-template
関連記事
