tris webpack boilerplate
1.0.0
残念ながら、私には今このプロジェクトを維持するための時間も熱意もありません。このプロジェクトをフォークするか、そのソースを読んでその構築方法を学ぶことをお勧めします。
この Webpack ボイラープレートは、Google Page Speed Insights と Google Lighthouse Reports で完璧なスコアを獲得するための適切な最適化をすべて達成しながら、静的 Web サイトを迅速に作成したいと考えている初心者、中級者、上級の開発者向けです。これは tris-gulp-boilerplate の進化版であり、現在は次の機能を備えています。 Webpack 4. Webpack は、Gulp では不可能だった JS をバンドルするための新しい標準です。ありがたいことに、Webpack はタスクの実行と js のバンドルの両方を実行できますか?
このプロジェクト/定型文の目標は、次の人々にリーチすることです。
初心者？ — Gulp/Webpack/Node/Npm を使用しているにもかかわらず、より詳しい開発者よりも詳細な説明が必要な人々。彼らは物事がうまくいくことを望んでいますが、その方法と理由も知りたいと思っています。
サイドプロジェクトのハスラー?♀️ — 素晴らしいアイデアはたくさんあるが、セットアップに時間を無駄にしたくない人。彼らはアイデア、アプリ、ウェブサイトをブラウザに素早く取り込む必要があります。
強迫性障害♂️ — パフォーマンスや最適化レポートで完璧なスコアを獲得するのが大好きな人。デジタル的に整理し、すべてのファイルが最小化、圧縮、zip 化され、すぐに出荷できることを知っていることに誇りを持っている人。
自由にこのリポジトリをフォークして、このテンプレートに基づいて独自のワークフローを作成してください。人それぞれ少しずつ違います、私は理解しています。
実行する前に、コンピューター上に git と Node.js が必要です。
git clone https://github.com/tr1s/tris-webpack-boilerplate.git your-project-name
cd your-project-name && rm -rf .git
npm install
npm start
準備は完了です。コーディングを開始してください ?? !
100% 新規に開始したり、独自の Sass ワークフローを作成したりする場合は、 src/styles/フォルダー、 src/index.htmlおよびsrc/index.scss/をすべて削除します。私はフォルダー構造を 7-1 パターンに基づいて作成しました。
選択した FTP / ホスティング プラットフォームにサイトをアップロードする準備ができたら、 npm run build実行します。これにより、Web サイトのすべてのアセットが最適化および圧縮されたdistフォルダーが作成されます。
すべてがどのように機能するかについての詳細な説明が必要な場合は、以下の機能についてお読みください。それ以外の場合は、コーディングを続けて楽しんでください:)
トリスウェブパックボイラープレート
使用法
特徴・内容
機能の説明
Webpack 構成の分割
Webpack開発サーバー
HTML アセットと縮小化
404 ページが見つかりません
SCSS から CSS へ + 最適化
ES6 トランスパイル
ブラウザリスト
画像アセット + 圧縮
フォントロード + プリロード
資産圧縮
クリーンな Webpack プラグイン
ソースマップ
ファビコンの生成
オフラインファーストとキャッシュ
プログレッシブ ウェブ アプリ (PWA)
ガッチャの
貢献する
1 つの大きなwebpack.config.jsを用意する代わりに、運用ビルドと開発ビルドをwebpack.dev.jsとwebpack.prod.jsという 2 つの新しい構成に分割します。開発と運用の両方で必要な設定は、 webpack.common.js設定に入れます。
npm start実行すると、マージされたwebpack.dev.js構成も含むwebpack.common.js構成に基づいて開発ビルドが実行されます。詳細については、Webpack ドキュメントを参照してください。
/* wenpack.dev.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* webpack.common.js をマージし、追加の */module.exports = merge(common, {
モード: "開発"、
/* コードの残りの部分はここに記述されます */}); npm run build実行すると、マージされたwebpack.prod.js構成も含むwebpack.common.js構成に基づいて運用ビルドが実行されます。
/* webpack.prod.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* webpack.common.js をマージしてから、追加の */module.exports = merge(common, {
モード: "本番",});開発ビルドと実稼働ビルドがブラウザーで視覚的に同じ結果を生成するようにしたいと考えています。たとえば、コーディングを完了してビルドを実行し、その後、画像が欠落したまったく別の Web サイトを構築することは望ましくありません。そのため、すべてのローダーとアセット管理を処理するwebpack.common.jsが用意されています。 webpack.dev.js 、軽量のソースマップを使用することで若干異なります。最後に、 webpack.prod.jsは、Web サイトを運用環境に移行する最終段階をすべて処理します。それは、画像圧縮、アセット圧縮 (gzip)、アセットの縮小、ファビコンの生成、キャッシュ、およびオフラインファーストのエクスペリエンスの作成です。
以下、各工程について説明していきます。
webpack-dev-server は package.json で構成されます。 npm startサーバーを実行し、 webpack.dev.js構成を使用してブラウザでプロジェクトを開きます。 npm startは npm のデフォルトのスクリプトなので、これにrunを追加する必要はありません。ただし、ビルド スクリプトの場合はnpm run buildと入力する必要があります。
"scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js"},html-loader を使用して HTML を文字列としてエクスポートし、出力を縮小します。これにより、 src/index.js内にsrc/index.htmlインポートできるようになります。ローダー オプションのminimize: trueを使用して HTML を単純に縮小できるため、これをwebpack.common.jsに移動せずにwebpack.prod.jsに残すのはこのためです。
/* webpack.common.js */{
テスト: /.html$/、
use: [{loader: 'html-loader',options: { minimum: true}
}]}、/* src/index.js */import "./index.html";
次に、html-webpack-plugin を使用して、すべての正しいアセットのインポートを含む、新しく生成されたindex.htmlを作成します。
template:オプションは、ソース HTML を取得する場所です。独自の HTML テンプレート、ハンドルバー テンプレート、またはその他のテンプレートを使用できます。
inject:オプションは、アセットが保存される場所です。 Webpack は、バンドルされたwebpack-bundle.jsスクリプトをデフォルトで本文の最後に配置しますが、ここでは script-ext-html-webpack-plugin を使用してdefer属性を追加するため、これをheadに切り替えました。スクリプトを作成し、Web サイトの先頭に配置します。これはパフォーマンスに役立ちます。
/* webpack.common.js */const HtmlWebpackPlugin = require('html-webpack-plugin');const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");plugins: [
new HtmlWebpackPlugin({タイトル: 'tris-webpack-boilerplate',ファイル名: 'index.html',テンプレート: './src/index.html',inject: 'head'
})、
new HtmlWebpackPlugin({タイトル: 'tris-404-page',ファイル名: '404.html',テンプレート: './src/404.html',inject: 'head'
})、
new ScriptExtHtmlWebpackPlugin({defaultAttribute: 'defer'
})、]、複数ページのウェブサイトを作成する場合は、 new HtmlWebpackPlugin({})プラグインを追加し続けてください。 title:キーを使用してページに適切な名前を付けます。
Netlify は、Web サイトを管理および展開できる素晴らしい無料サービスです。 Netlify は、誰かが Web サイト上の壊れたリンクを開こうとすると、自動的に404.htmlを検索し、そのページをロードします。ですから、心配することは何もありません。
別のサービスを使用している場合は、 404.htmlページをアクティブにする方法を調べてください。これは、壊れたリンクにアクセスしたユーザーをメイン ページに戻すための優れた方法です。
Sass/SCSS を使用するには、望ましい結果を得るためにいくつかのローダーを使用する必要があります。 css-loader、postcss-loader、および sass-loader。
test: regex (正規表現) を使用して sass、scss、または css ファイルをチェックし、mini-css-extract-plugin にラップされたこれら 3 つのローダーを通じてそれらのファイルを実行し、単一の CSS ファイルを生成します。本番環境で使用します。
ローダーの概念について詳しくは、こちらをご覧ください。
/* webpack.common.js */{
テスト: /.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader,{ ローダー: 'css-loader'、オプション: {sourceMap: true }},{ ローダー: 'postcss-loader'、オプション: {sourceMap: true }}、{ ローダー: 'sass-loader '、オプション: {sourceMap: true }}
]}、ローダー シーケンスの 2 番目の部分postcss-loaderでは、CSS を縮小して自動プレフィックスを追加します。これを行うには、プロジェクトのルートにpostcss.config.jsを作成し、次のように設定します。
/* postcss.config.js */const purgecss = require("@fullhuman/postcss-purgecss");module.exports = {
プラグイン: [require("autoprefixer"),require("cssnano")({ preset: "default",}),purgecss({ content: ["./**/*.html"], keyframes: true,} ）、
],};autoprefixer と cssnano について読んで、必要に応じて好みに合わせて設定してください。さらに、postcss は非常に強力なツールなので、一般的にも読んでください。
Purgecss は、コード内の未使用の CSS を削除するための素晴らしい postcss プラグインです。 Purgecss はコンテンツと CSS ファイルを分析します。次に、ファイル内で使用されているセレクターとコンテンツ ファイル内のセレクターが照合されます。 CSS から未使用のセレクターが削除され、CSS ファイルが小さくなります。
デフォルトですぐに使用できますが、自分で視覚的にテストしたい場合は、 @import "../node_modules/bulma/bulma";のコメントを解除してください。次に、 npm run build index.scss実行し、結果の dist フォルダー内のwebpack-bundle.cssを確認します。コードがそれほど多くないことがわかります。次に、 postcss.config.jsから purgecss を削除し、 npm run build再度実行すると、CSS に Bulma フレームワークからのコードが 10,000 行以上あることがわかります。ご覧のとおり、purgecss は、Bootstrap、Foundation、Bulma などの大きなフレームワークを使用するときに使用していない CSS を削除するのに最適です。
mini-css-extract-plugin は、CSS を抽出し、出力前に名前を付ける最後のステップです。
/* webpack.common.js */const MiniCssExtractPlugin = require("mini-css-extract-plugin");plugins: [
new MiniCssExtractPlugin({ファイル名: 'webpack-bundle.css',チャンクファイル名: '[id].css'
})]、したがって、基本的には... css-loaderアプリケーションで参照されるすべての css ファイルから CSS を収集し、それらを文字列に入れます。次に、 postcss-loaderスタイルに自動プレフィックスを付けて縮小し、 sass-loaderそれを JS モジュールに変換し、次にmini-css-extract-plugin JS モジュールから CSS を抽出して、Web ブラウザーが解析できる単一の CSS ファイルにします。
最新の JavaScript 機能と構文を使用したい場合もありますが、すべてのブラウザーがまだそれらをサポートしているわけではありません。 Babel がそれを処理してくれます。
ここでは、 node_modulesフォルダーを除くすべての js ファイルをテストし、babel-preset-env プリセットを使用して babel-loader を通じて実行します。
/* webpack.common.js */{
テスト: /.js$/、
除外: /(node_modules)/,
使用: {loader: 'babel-loader',options: { presets: ['@babel/preset-env']}
}}今回はwebpack.prod.jsファイルに挑戦します。 npm run buildと、出力 js は縮小され、完全なソースマップが含まれます。 npm start経由で開発モードで実行すると、ソースマップはさらに軽量になりますが、js は縮小されません。
/* webpack.prod.js */const TerserPlugin = require("terser-webpack-plugin");module.exports = merge(common, {
モード: 「本番」、
開発ツール: "ソースマップ",
最適化: {minimizer: [ new TerserPlugin({test: /.js(?.*)?$/i,Parallel: true,sourceMap: true, }),],
},});オプションの詳細については、terser ドキュメントを参照してください。
ここでは、サポートを追加したいブラウザを特定のツールに伝えることができる 1 つの場所が必要です。これは、browserslist と、プロジェクト ルートにある対応する.browserslistrcファイルを使用して実現します。 Autoprefixer と babel-present-env はこのファイルを取得し、設定に基づいて必要なものを適用します。
他に.browserslistrcに渡すことができるものを読み、browserl.ist を使用して、具体的にどのブラウザが構成の対象となるかを確認してください。さて、ブラウザについてはもう何度も言ったと思います?。
/* .browserslistrc */> 0.25% は死んでいません
まず、regex (正規表現) を使用して jpeg、jpg、png、gif、および svg をテストし、次にファイル ローダーを使用します。これは、ファイルのインポートと要求を URL に解決し、ファイルを出力ディレクトリに出力します。したがって、 src/imagesフォルダーからファイルを取得する<img>要素を使用している場合、そのファイルはインポートされ、指定された出力パスimagesに出力されます。 npm start (dev の実行) またはnpm run build (ビルドの実行) を実行すると、どちらがsrc/imagesになります。
/* webpack.common.js */{
テスト: /.(jpe?g|png|gif|svg)$/,
use: [{loader: 'file-loader',options: { name: '[name].[ext]'、outputPath: 'images/'、publicPath: 'images/'},
}]}、ここでは、 npm run buildで画像を最適化するだけなので、 webpack.prod.js以下のように編集します。
ここでも、正規表現を使用して jpeg、jpg、png、gif、svg をテストし、適切な最適化を適用します。 gifsicleは可逆 gif 圧縮プログラムであり、 pngquant非可逆 png 圧縮プログラムであり、 imageminMozjpegという追加のプラグインを追加して非可逆 jpg/jpeg 圧縮を実行できます。安全な方法は、品質を 75 ～ 90 の間に設定することです。そうすれば、目に見える品質を損なうことなく、ある程度の適切な圧縮が得られるはずです。
可逆圧縮を使用し、プロジェクトに追加する前に画像を適切なサイズにトリミングすることをお勧めします。これを行うには、imageminMozjpeg および pngquant キー セクションを削除するだけです。
tinypng を画像圧縮に使用することもできます。
/* webpack.prod.js */const ImageminPlugin = require("imagemin-webpack-plugin").default;const imageminMozjpeg = require("imagemin-mozjpeg");plugins: [
new ImageminPlugin({test: /.(jpe?g|png|gif|svg)$/i,gifsicle: { // ロスレス gif 圧縮器 optimizationLevel: 9,},pngquant: { // 非可逆 PNG 圧縮器、デフォルトのロスレス用に削除品質: "75",},plugins: [ imageminMozjpeg({// 非可逆 jpg 圧縮、デフォルトの無損失品質のために削除: "75", }),],
}),];ここでは、すべての一般的なフォント拡張子をテストし、ファイルローダーを再度使用してフォントのインポートを解決して出力しています。
/* webpack.common.js */{
テスト: /.(woff|woff2|ttf|otf)$/,
use: [{loader: 'file-loader',options: { name: '[name].[ext]'、outputPath: 'fonts/'、publicPath: 'fonts/'},
}]}、 src/styles/base/_typography.scssでは、 @font-faceルールを介してフォントをロードしています。 Google Webfonts Helper は、手間をかけずに Google Fonts を自己ホストするための素晴らしいツールでもあります。 CSS のトリックに関する@font-faceルールの詳細を参照してください。さらに、font-display プロパティについても読んでください。
フォントをプリロードすることが常にベスト プラクティスです。これは preload-webpack-plugin を使用して実現します。正しく動作させるには、 HtmlWebpackPluginの直後に置く必要があります。
/* webpack.common.js */new PreloadWebpackPlugin({
rel: 'プリロード',
as(entry) {if (/.(woff|woff2|ttf|otf)$/.test(entry)) return 'font';
}、
ファイルホワイトリスト: [/.(woff|woff2|ttf|otf)$/],
include: 'allAssets'})、ここでは、compression-webpack-plugin を使用してwebpack.prod.js構成に戻り、html、css、および javascript ファイルのみを圧縮します。これは、生成されるソースマップ ファイルの圧縮を避けるためです。
/* webpack.prod.js */module.exports = merge(common, {
モード: '本番'、
plugins: [new CompressionPlugin({ test: /.(html|css|js)(?.*)?$/i // html/css/js のみを圧縮し、ソースマップの圧縮などをスキップします}),});Clean-webpack-plugin は、新しいビルド フォルダーをビルドする前にビルド フォルダーを削除/クリーンするための単純な Webpack プラグインです。 npm run buildまたはnpm start実行するときは、フォルダーの探索に注意してください。現在のdistフォルダー (以前に作成していた場合) は削除され、直後に新しい dist フォルダーが表示されます。
/* webpack.common.js */const CleanWebpackPlugin = require("clean-webpack-plugin");plugins: [new CleanWebpackPlugin(["dist"])];ソースマップの使用は、開発ツールでコードをデバッグするために不可欠です。
npm startて Chrome で devtools を開いてコンソールをクリックすると、 script.js 1 行目と 2 行目からの 2 つの console.log があることがわかります。これは、次のフォルダー構造で簡単に確認できます。 src/scripts/script.js 。ソースマップを使用しなかった場合、devtools はこれらの console.log がバンドルされたwebpack-bundle.jsからのものであることを示しますが、これはあまり役に立ちません。
私たちのスタイルでも同様のケースがあります。 devtools でbody要素を見ると、いくつかのスタイルが_global.scssファイルから適用され、いくつかは_typography.scssファイルから適用されていることがわかります。これらは両方ともsrc/styles/base/フォルダーにあります。ソースマップを省略した場合、これを知ることはできません。バンドルされたwebpack-bundle.cssからのスタイルが表示されるだけです。
/* webpack.dev.js */module.exports = merge(common, {
モード: "開発"、
devtool: "インラインソースマップ",}); /* webpack.prod.js */module.exports = merge(common, {
モード: 「本番」、
開発ツール: "ソースマップ",});さまざまな種類のソースマップについて詳しく読んで、プロジェクトに最適なものを見つけてください。さらに、webpack ドキュメントの devtool オプションについても読んでください。
これは、1 つの画像ソースに基づいて必要なすべてのアイコンを生成する優れたプラグインです。 src/images/フォルダーには、favicons-webpack-plugin に入力するtris-package.svgがあります。
Apple、Android、Chrome、Firefox、Twitter、Windows などのアイコンを生成します。各アイコンをさまざまなサイズで生成し、それらが属する Web サイトのヘッドに直接インポートします。 Twitter と Windows はデフォルトで false に設定されているため、念のためすべての基本をカバーするために true に変更しました。
注: これにより、ビルド時間が大幅に増加します。それが内部でどれだけのことを行っているか、そして長期的にどれだけの時間を節約しているかを考えると、これは理解できます。 npm run build通常より 20 秒長くかかっても驚かないでください。
/* webpack.prod.js */const FaviconsWebpackPlugin = require("favicons-webpack-plugin");module.exports = merge(common, {
モード: 「本番」、
プラグイン: [新しい FaviconWebpackPlugin({ ロゴ: "./src/images/favicon.svg", アイコン: {twitter: true,windows: true, },}),
],});ここでは、offline-plugin プラグインを使用して、ページの読み込み時にすべてのアセットをキャッシュします。
このプラグインは、 Webpackプロジェクトにオフライン エクスペリエンスを提供することを目的としています。 ServiceWorkerと、内部でフォールバックとしてAppCache を使用します。このプラグインをwebpack.prod.jsに組み込み、付随するランタイムをクライアント スクリプト (src/index.js) に組み込むだけで、Webpack 出力アセットのすべて (または一部) がキャッシュされることで、プロジェクトはオフライン対応になります。
注: npm run build 、変更をサーバーにアップロードする場合 (または、Web サイトを更新したままにする場合)、変更を確認するには、Web サイトを閉じて再度開く必要があります。タブを開いたまま更新し続けることはできません。キャッシュが無効になるには、タブを閉じて再度開く必要があります。
/* webpack.prod.js */const OfflinePlugin = require("offline-plugin");module.exports = merge(common, {
モード: 「本番」、
プラグイン: [新しい OfflinePlugin()],});プログレッシブ Web アプリケーション (PWA) は、通常の Web ページや Web サイトのように読み込まれる Web アプリケーションですが、オフラインでの作業、プッシュ通知、従来はネイティブ アプリケーションでのみ利用できたデバイス ハードウェア アクセスなどのユーザー機能を提供できます。 PWA は、Web の柔軟性とネイティブ アプリケーションのエクスペリエンスを組み合わせます。
このボイラープレートを PWA にする最後のステップは、必須の Web アプリ マニフェストをプロジェクトのルートに追加し、適切に構成することです。
Webpack は、jQuery のような大きなライブラリをバンドルしようとすると問題に遭遇します。 $ is not defined 、またはjQuery is not definedなどのコンソール エラーが発生します。これを解決するために、Webpack がそれを外部として処理できるようにします。次に変数を定義し、CDN 経由で jQuery を組み込みます。ほとんどの人はブラウザに jQuery をキャッシュしているため、パフォーマンスの点では問題になりません。デフォルトでexternals: config を追加しましたが、jQuery cdn を使用する予定がある場合は、自分で追加する必要があります。
外部の詳細については、Webpack ドキュメントを参照してください。
/* webpack.common.js */plugins: [],externals: {
$: 'jクエリ',
jQuery: 'jQuery',
'window.$': 'jquery',}/* src/index.html */<head> <scriptdefersrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script></head>
物事を徹底的に説明するよう最善を尽くしますが、より明確に説明できる場合は、お気軽にいくつかの編集案を添えてプル リクエストを送信してください。ありがとう！
これがお役に立てば幸いです!興味があれば、ツイッターで私をフォローしてください。 ?
