😉 👴🏾 🈯️ Webpack5を最初からセットアップする 🎈 👍🏿 🙆🏽

Webpackを使用してJavaScript、画像、フォント、スタイルを構築する方法、および開発

サーバーを実行する方法を学びます。以前にWebpack 4を使用したことがある場合は、バージョン5との違いをいくつか示します。

「webpack-dev-server」コマンドは「webpack-serve」のようになりました
file-loader、raw-loader、url-loaderを個別にインストールする必要がなくなり、組み込みのアセットモジュールを使用できるようになりました。
Node.js , , , stream, «stream-browserify» { stream: «stream-browserify» }

?

ほとんどの場合、サイトはJavaScriptがほとんどない純粋なHTMLで記述されていません。多くの場合、サイトはJavaScriptのみを使用して構築されています。したがって、コードを構築、縮小、およびトランスパイルすることが必要になります。ここでwebpackが役に立ちます。

Webpackはモジュールビルダーです。これは、ブラウザーで使用するためのコードをパッケージ化するために使用されます。これにより、Babelで最新のJavaScript機能を利用したり、TypeScriptを使用して、クロスブラウザーで縮小されたコードにコンパイルしたりできます。また、静的リソースをJavaScriptにインポートすることもできます。

開発者向けに、Webpackは、ファイルの保存時にモジュールとスタイルをその場で更新できる開発サーバーも提供します。「vuecreate」や「react-create-app」などのコマンドラインツールは、バックグラウンドでWebパックを使用しますが、これらのフレームワーク用に独自のWebパックセットアップを簡単に作成できます。

Webpackは他にも多くのことを実行できますが、この記事では、Webpackのセットアップと使用の基本について説明します。

インストール

プロジェクトディレクトリを作成して初期化します。

mkdir webpack-tutorial
cd !$
// 
cd webpack-tutorial
yarn init -yp  //     "package.json"
// 
npm init -y

開発の依存関係としてwebpackとwebpack-cliをインストールします。

yarn add -D webpack webpack-cli
// 
npm i -D webpack webpack-cli

webpack-モジュールとリソースのコレクター
webpack-cli - webpackコマンドラインインターフェイス

アプリケーションファイルを保存するためのディレクトリ「src」を作成します。簡単な「index.js」ファイルを作成することから始めます。

console.log(" !")

これで、メインパッケージがインストールされたNode.jsプロジェクトと「index.js」ファイルができました。Webpackの構成を始めましょう。

基本設定

コレクターの構成を始めましょう。プロジェクトのルートディレクトリにファイル「webpack.config.js」を作成します。

エントリーポイント

まず、アプリケーションのエントリポイントを定義する必要があります。Webpackがコンパイルするファイル。上記の例では、エントリポイントを「src /index.js」として定義しています。

// webpack.config.js
const path = require('path')

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/index.js'),
    },
}

出口点

出口点は、Webpackによってコンパイルされたファイルが配置されるディレクトリです。出口点を「dist」に設定します。「[name]」プレフィックスは、srcのファイル名と一致します。

// webpack.config.js
module.exports = {
    // ...

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    },
}

プロジェクトを構築するための最小限のセットアップの準備が整いました。「webpack」コマンドを実行する「package.json」ファイルに「build」スクリプトを追加します。

// package.json
"scripts": {
    "build": "webpack"
}

Webパックを起動します。

yarn build
// 
npm run build

asset main.bundle.js 19 bytes [emitted] [minimized] (name: main)
./src/index.js 18 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 152 mss

ファイル「index.bundle.js」は「dist」ディレクトリに作成されます。ファイルは変更されていませんが、プロジェクトは正常にビルドされました。

プラグイン

プラグインインターフェイスにより、Webパックは非常に柔軟になります。プラグインは、Webパック自体とサードパーティの拡張機能の両方で使用されます。一部のプラグインは、ほぼすべてのプロジェクトで使用されています。

HTMLテンプレートベースのプラグイン

既製のアセンブリがありますが、スクリプトとしてアセンブリをロードするマークアップなしでは役に立ちません。このようなHTMLファイルを自動的に生成する必要があるため、html-webpack-pluginを使用します。

html-webpack-plugin-テンプレートに基づいてHTMLファイルを作成します

プラグインをインストールします。

yarn add -D html-webpack-plugin

「src」ディレクトリに「template.html」ファイルを作成します。テンプレートに変数やその他の情報を追加できます。変数「title」を追加しましょう。そうしないと、テンプレートは、識別子「root」のコンテナを持つ通常のHTMLファイルのようになります。

<!-- src/template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

「plugins」プロパティをwebpack設定に追加します。ここで、プラグイン、出力ファイルの名前（index.html）、およびテンプレートを定義します。

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve(__dirname, './src/template.html'), // 
            filename: 'index.html', //   
        }),
    ],
}

組み立てを開始します。「dist」ディレクトリには、スクリプトが含まれている「index.html」ファイルが含まれるようになりました。涼しい！このファイルをブラウザで開くと、「おもしろい！」というメッセージが表示されます。コンソールで。

DOMにコンテンツを追加しましょう。「index.js」ファイルの内容を変更して、アセンブリを再起動しましょう。

// index.js
//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//    DOM
const root = document.querySelector('#root')
root.append(heading)

「dist」ディレクトリに移動してサーバーを起動します（このためには、http-serverをグローバルにインストールする必要があります：yarn global addhttp-serverまたはnpmi -g http-server）。

http-server

開いたブラウザタブに、「おもしろい！」という見出しが表示されます。ファイルサイズの縮小にも注意してください。

クリーニング

clean-webpack-pluginをインストールします。これにより、プロジェクトがビルドされるたびに「dist」ディレクトリがクリーンアップされます。これにより、不要になった古いファイルを自動的に削除できます。

clean-webpack-plugin-プロジェクトビルドディレクトリを削除/クリーンアップします

// webpack.config.js
const HtmlWebpackPlugin = require('html=webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        // ...
        new CleanWebpackPlugin(),
    ],
}

モジュールとローダー

Webpackは、ローダーを使用して、モジュールによってロードされたファイルを解析します。これらは、JavaScriptファイル、画像やスタイルなどの静的リソース、およびTypeScriptやBabelなどのコンパイラーです。Webpack 5には、いくつかの組み込みリソースローダーがあります。

私たちのプロジェクトには、スクリプトをロードするHTMLファイルがありますが、それ以外は何もしません。コレクターに何が欲しいのか考えてみましょう。

最新のJavaScript機能を、すべてまたはほとんどのブラウザーと互換性のあるコードにコンパイルします
スタイルのインポートとSCSSからCSSへの変換
画像とフォントのインポート
ReactまたはVueのカスタマイズ（オプション）

まず、JavaScriptをコンパイルするようにBabelを設定しましょう。

バベル（JavaScript）

Babelは、将来のJavaScriptを今日有効にするツールです。

プロジェクト内のすべてのjsファイル（node_modulesディレクトリに含まれるファイルを除く）がbabel-loaderを使用してトランスパイルされるというルールを定義します。Babelが機能するには、いくつかの依存関係が必要です。

babel-loader -Babelとwebpackを使用してファイルをトランスパイルする
@ babel / core -ES2015 +を下位互換のJavaScriptにトランスパイル
@ babel / preset-env-便利なBabelのデフォルトプリセット
@ babel / plugin-proposal-class-properties-カスタムBabel構成の例（クラスのコンストラクターではなく、クラスの本体にインスタンスプロパティを設定）

yarn add -D babel-loader @babel/core @babel/preset-env @babel/babel-plugin-proposal-class-properties

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    }
}

TypeScriptプロジェクトを設定する場合は、変換が必要なすべてのJavaScriptファイルに対して、babel-loaderではなくtypescript-loaderを使用する必要があります。拡張子が「ts」のファイルをチェックし、ts-loaderを使用しています。

これでBabelがセットアップされましたが、プラグインはまだありません。index.jsの先頭に次のコードを追加することで、これを確認できます。

// index.js
//     
class Game {
    name = 'Violin Charades'
}
const myGame = new Game()

//  
const p = document.createElement('p')
p.textContent = `I like ${myGame.game}.`

//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//      DOM
const root = document.querySelector('#root')
root.append(heading, p)

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/you/webpack-tutorial/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (3:8):

  1 | // Create a class property without a constructor
  2 | class Game {
> 3 |   name = 'Violin Charades'
    |        ^
  4 | }

これを修正するには、プロジェクトのルートに「.babelrc」ファイルを作成します。

// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

ビルドはヤーンビルドから始めます。すべてが機能するようになりました。

画像

画像をJavaScriptファイルにインポートしたいのですが、JavaScriptではこれを実行できません。これを確認するには、ディレクトリ「src / images」を作成し、そこに画像を配置して、ファイル「index.js」にインポートしてみます。

// index.js
import example from './images/example.png'

// ...

ビルドを開始すると、例外がスローされます。

ERROR in ./src/images/example.png 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

前述のように、Webpackには、静的ファイルを処理するためのダウンローダーがいくつか組み込まれています。画像の場合は、「アセット/リソース」タイプを使用してください。ローダー（ローダー）ではなく、タイプ（タイプ）について話していることに注意してください。

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // 
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
}

新しいファイルが「dist」ディレクトリに表示されます。

フォントおよびその他の埋め込みデータ

Webpackには、フォントやSVGなどの埋め込みデータを処理するためのモジュールも組み込まれています。これを行うには、タイプ「asset / inline」を指定するだけです。

// index.js
import example from './images/example.svg'

// ...

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            //   SVG
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },
        ],
    },
}

スタイル

スタイルローダーを使用することは、スクリプトで「import'file.css '」のような文字列を使用するための前提条件です。

多くの人がCSS-in-JS、スタイル付きコンポーネント、およびJavaScriptでスタイルを設定できるその他のツールを使用しています。

1つのCSSファイルのロードに制限できる場合があります。ただし、ブラウザで最新のCSS機能を使用できるPostCSSを使用したい場合があります。または、Sassプリプロセッサを使用しますか。

3つすべてを使用したい-Sassでコードを記述し、PostCSSで処理し、CSSにコンパイルします。

sass-loader -SCSSをロードし、CSSにコンパイルします
node-sass-ノードSass
postcss-loader - PostCSSを使用したCSS処理
postcss-preset-env-便利なPostCSS設定
css-loader-スタイルの読み込み
style-loader -DOM要素にスタイルを適用する

yarn add -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass

Babelと同様に、PostCSSには個別の構成ファイルが必要です。

// postcss.config.js
module.exports = {
    plugins: {
        'post-css-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}

名前付きツールの機能をテストするために、Sass変数とPostCSS（lch）の使用例を含むファイル "src / styles /main.scss"を作成しましょう。

// src/styles/main.css
$font-size: 1rem;
$font-color: lch(53 105 40);

html {
    font-size: $font-size;
    color: $font-color;
}

このファイルをindex.jsにインポートし、4つのローダーを追加します。ローダーはWebpackによって右から左に使用されるため、最後はsass-loader、PostCSS、CSS、最後にスタイルローダーで、コンパイルされたスタイルをDOM要素に適用します。

// index.js
import './styles/main.css'

// ...

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // CSS, PostCSS, Sass
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
            },
        ],
    },
}

ビルドが完了すると、SassとPostCSSがDOMに適用されていることがわかります。

開発モードのプリファレンスを設定していることに注意してください。本番環境では、縮小されたCSSをエクスポートするstyle-loaderの代わりにMiniCssExtractPluginを使用します。

開発

プロジェクトを再構築するたびにyarnビルド（npm run build）を入力するのは面倒です。プロジェクトが大きいほど、ビルドに時間がかかります。したがって、2つのWebpack構成ファイルが必要です。

すべてのリソースマップ（ソースマップ）の縮小、最適化、削除を含む本番環境
サーバーの起動、変更ごとの更新、リソースマップなどの開発設定

開発モードでは、「dist」ディレクトリを作成する代わりに、必要な情報をメモリに保存することを期待できます。

これを行うには、webpack-dev-serverをインストールする必要があります。

webpack-dev-serverは開発サーバーです

yarn add -D webpack-dev-server

開発にサーバーを使用する方法を示すために、「webpack.config.js」ファイルで適切な設定を定義できます。実際には、2つの構成ファイルを用意するのが最善です。1つはモード：本番、もう1つはモード：開発です。特別に用意されたwebpack5ボイラープレートでは、webpack-mergeを使用して基本設定を1つのファイルにまとめています。特別な要件は、「webpack.prod.js」ファイルと「webpack.dev.js」ファイルに含まれています。

// webpack.config.js
const webpack = require('webpack')

module.exports = {
    // ...
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    plugins: [
        // ...
        //      
        new webpack.HotModuleReplacement(),
    ],
}

開発モードと「devServer」プロパティを追加しました。このプロパティには、いくつかの標準設定が含まれています-ポート番号（8080）、ブラウザの自動オープン、hot-module-replacementの使用。これにはwebpack.HotModuleReplacement（）が必要です。これにより、ページ全体をリロードせずにモジュールを更新できます。個々のスタイルが変更された場合、それらのみが更新されるため、JavaScriptをリロードする必要がないため、開発が大幅にスピードアップします。

サーバーを起動するには、「webpackserve」コマンドを使用します。

// package.json
"scripts": {
    "start": "webpack serve"
}

yarn start

このコマンドを実行すると、ブラウザはlocalhost：8080で開きます。これで、SassとJavaScriptを変更でき、それらはその場で更新されます。

結論

この記事がwebpackの使用を開始するのに役立つことを願っています。日常のタスクを簡単に解決できるように、Babel、Sass、PostCss、本番用の最適化、および開発用のサーバーを備えたwebpack5ボイラープレートを開発しました。これを基礎として、React、Vue、またはTypeScriptで動作するようにWebパックを簡単に構成できます。

Webpack5を最初からセットアップする

?