JavaScript で Webpack を使用するチュートリアル

0. Webpackとは

ここに画像の説明を挿入

Webpack は、フロントエンドのリソース読み込み/パッケージ化ツールです。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。

1. Webpackの使用

1. プロジェクトを初期化する

npm 初期化

2. Webpackに必要なパッケージをインストールする

npm インストール --save-dev webpack-cli webpack

3. Webpackを構成する
package.jsonファイルにコンパイルを実行するコマンドを追加します。

  「スクリプト」: {
    "ウェブパック": "ウェブパック"
    // カスタマイズ可能な設定ファイル: "webpack": "webpack --config webpack.js"
  },

4. 設定ファイル (デフォルトは webpack.config.js) を作成し、設定します。

定数パス = require('path');

モジュール.エクスポート = {
    モード: '開発'、
    エントリ: './src/index.js',
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: 'bundle.js',
    },
};

5. パッケージ化とテスト

C:\Users\Daixiang\Desktop\demo>npm run webpack

> [email protected] webpack C:\Users\Daixiang\Desktop\demo
> webpack --config webpack.config.js

assetbundle.js 4.34 KiB [emit と比較] (名前: main)
ランタイムモジュール 670 バイト 3 モジュール
キャッシュ可能なモジュール 231 バイト
  ./src/index.js 159 バイト [ビルド済み] [コード生成済み]
  ./src/Base.js 72 バイト [ビルド済み] [コード生成済み]
webpack 5.59.1 は 113 ミリ秒で正常にコンパイルされました

2. Webpackのコアコンセプト

entry はエントリファイルを指定します。
output は出力関連情報を指定します。
ローダーは、webpack が JavaScript 以外のファイルを処理するのに役立ちます。
プラグインは、より広範囲のタスクを実行するために使用されます。

2.1 エントリー

2.1.1 単一エントリ

単一のエントリを書き込むには 2 つの方法があります。

書き方1: entry: './src/index.js'

書き方2: entry: {main: './src/index.js'}

config.js は、

定数パス = require('path');

モジュール.エクスポート = {
    モード: '開発'、
    // エントリ: './src/index.js',
    エントリー: {
        メイン: './src/index.js'
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: 'bundle.js',
    },
};

2.1.2 複数の入口

config.js は、

定数パス = require('path');

モジュール.エクスポート = {
    モード: '開発'、
    //複数エントリ: {
        メイン: './src/index.js',
        ベース: './src/Base.js',
        について: './src/About.js',
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: 'bundle.js',
    },
};

2.2 出力

2.2.1 単一入力による出力

エントリが 1 つだけの場合は、出力ファイル名をカスタマイズします。
config.js は、

    出力: {
    	// パス path: path.resolve(__dirname, 'dist'),
        // ファイル名: 'bundle.js',
    },

2.2.2 複数の入力による出力

エントリが複数ある場合はファイル名が動的に出力されます。
config.js は、

    出力: {
    	// パス path: path.resolve(__dirname, 'dist'),
        // 動的出力ファイル名 filename: '[name].js',
    },

2.3 ローダー

Loader は、Webpack が js 以外のファイルを処理できるようにするモジュールです。
ローダー構成リファレンスドキュメント: https://webpack.docschina.org/loaders/
config.js は、

    モジュール: {
        ルール:
            {
                // 通常のマッチングファイルテスト: /\.js$/,
                // 除外フォルダー exclude: /node_modules/,
                // 指定されたローダーを使用する
                ローダー: 'babel-loader'
            }
        ]
    }

新しいAPIをコンパイルするには、 core-jsを導入する必要があることに注意してください。
1. npmを使用してcore-jsをインストールする

npm インストール --save-dev core-js

2. jsエントリファイルにcore-js/stableを導入する

'core-js/stable' をインポートします。

3. パッケージ化とテスト

npm 実行 webpack

2.4 プラグイン

プラグインは、より広範囲のタスクを実行するために使用されるプラグインです。
プラグイン設定リファレンスドキュメント: https://webpack.docschina.org/plugins
プラグインをインストールするにはhtml-webpack-plugin例に挙げます。
1. npmを使用してhtml-webpack-pluginをインストールする

npm インストール --save-dev html-webpack-plugin

2. webpack.config.jsファイルを構成する

HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
プラグイン: [新しい HtmlWebpackPlugin()],

config.js は、

定数パス = require('path');
// ファイルをインポートして定数を定義します。const HtmlWebpackPlugin = require('html-webpack-plugin');

モジュール.エクスポート = {
    モード: '開発'、
    エントリー: {
        インデックス: './src/index.js',
        検索: './src/search.js',
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: '[name].js',
    },
    モジュール: {
        ルール:
            {
                // 正規表現マッチングテスト: /\.js$/,
                // 除外フォルダー exclude: /node_modules/,
                // 指定されたローダーを使用する
                ローダー: 'babel-loader'
            }
        ]
    },
    プラグイン: [
        // 単一エントリ // new HtmlWebpackPlugin(
        // {
        // テンプレート ファイルを指定し、生成された js とその他のファイルをテンプレート ファイルに配置します // template: './index.html'
        // }
        // )
        //複数エントリ new HtmlWebpackPlugin(
            {
                テンプレート: './index.html',
                ファイル名: 'index.html',
                チャンク:['インデックス'],
                縮小:
                    // コメントを削除する removeComments: true,
                    // 空白を削除する removeWhitespace: false,
                    // HTML タグ属性から二重引用符を削除します。removeAttributeQuotes: true
                }
            }
        ）、
        新しいHtmlWebpackプラグイン(
            {
                テンプレート: './search.html',
                ファイル名: 'search.html',
                チャンク:['検索']
            }
        ）
    ]、
};

3. パッケージ化とテスト

npm 実行 webpack

インデックス.html

<!DOCTYPE html>
<html lang=zh>
<ヘッド>
    <メタ文字セット=UTF-8>
    <meta http-equiv=X-UA-互換コンテンツ="IE=edge">
    <title>インデックス</title>
<script defer=defer src=index.js></script></head>
<本文>
</本文>
</html>

検索.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <title>検索</title>
    </スタイル>
<script defer src="search.js"></script>
</head>
<本文>
</本文>
</html>

3. WebpackはCSSファイルを処理する

3.1 HTMLに埋め込まれた<style>タグ

1. css-loaderをインストールしてjs内のcssファイルを識別し、style-loaderをインストールしてhtmlにcssファイルを埋め込みます。

npm インストール --save-dev css-loader スタイルローダー

2. webpack.config.jsファイルを構成する
config.js は、

    モジュール: {
        ルール:
            {
                // 正規表現マッチングテスト: /\.css$/,
                // js 内の css を識別するには css-loader を使用し、html に css ファイルを埋め込むには style-loader を使用します // 配列の順序に注意し、右から左に使用します use: ['style-loader', 'css-loader']
            }
        ]
    },

3. パッケージ化とテスト

npm 実行 webpack

3.2 <link>タグの形式でHTMLを導入する

css-loader を使用して js 内の css を識別し、mini-css-extract-plugin を使用して css ファイルをインポートします。
1. css-loader、mini-css-extract-pluginをインストールする

npm インストール --save-dev css-loader ミニ css-extract-plugin

2. webpack.config.jsファイルを構成する
config.js は、

定数パス = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

モジュール.エクスポート = {
    モード: '開発'、
    エントリー: {
        インデックス: './src/index.js',
        検索: './src/search.js',
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: '[name].js',
    },
    モジュール: {
        ルール:
			......
            {
                // 正規表現マッチングテスト: /\.css$/,
                // css-loader を使用して js 内の css を識別し、MiniCssExtractPlugin.loader を使用して css ファイルをインポートします // 配列の順序に注意し、右から左に使用します use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    プラグイン: [
        新しい MiniCssExtractPlugin(
            {
                ファイル名: 'css/[name].css'
            }
        ）
    ]、
};

3. パッケージ化とテスト

npm 実行 webpack

ディストリビューション/index.html

<!DOCTYPE html>
<html lang=zh>
<ヘッド>
    <メタ文字セット=UTF-8>
    <meta http-equiv=X-UA-互換コンテンツ="IE=edge">
    <title>インデックス</title>
    <script defer=defer src=index.js></script>
    <link href=css/index.css rel=スタイルシート>
</head>
<本文>
</本文>
</html>

4. WebpackはCSSで画像を処理する

4.1 ファイルローダーを使用してCSSで画像を処理する

ファイルローダーを使用して、CSS で画像を処理します。 (ファイルローダーはバージョン5では非推奨です)
ファイルローダーのリファレンスドキュメント: https://v4.webpack.js.org/loaders/file-loader/
インデックス.css

体{
    背景画像: url(./images/3.jpg);
    背景繰り返し: 繰り返しなし;
}

1. ファイルローダーをインストールする

npm インストール --save-dev ファイルローダー

2. webpack.config.jsファイルを構成する
config.js は、

定数パス = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

モジュール.エクスポート = {
    モード: '開発'、
    エントリー: {
        インデックス: './src/index.js',
        検索: './src/search.js',
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: '[name].js',
    },
    モジュール: {
        ルール:
            ......
            {
                // 正規表現マッチングテスト: /\.css$/,
                // css-loader を使用して js 内の css を識別し、MiniCssExtractPlugin.loader を使用して css ファイルをインポートします // 配列の順序に注意し、右から左に使用します: [
                    {
                        ローダー: MiniCssExtractPlugin.loader、
                        オプション:
                            パブリックパス: '../'
                        }
                    },
                    'css-ローダー'
                ]
            },
            {
                // 正規表現マッチングテスト: /\.(jpe?g|png|gif)$/,
                使用： {
                    ローダー: 'ファイルローダー',
                    オプション:
                        名前: 'img/[名前].[拡張子]'
                    }
                }
            }
        ]
    },
    プラグイン: [
        //複数エントリ new HtmlWebpackPlugin(
            {
                テンプレート: './index.html',
                ファイル名: 'index.html',
                チャンク: ['インデックス'],
                縮小:
                    // コメントを削除する removeComments: true,
                    // スペースを削除する collapseWhitespace: false,
                    // HTML タグ属性から二重引用符を削除します。removeAttributeQuotes: true
                }
            }
        ）、
        新しいHtmlWebpackプラグイン(
            {
                テンプレート: './search.html',
                ファイル名: 'search.html',
                チャンク: ['検索']
            }
        ）、
        新しい MiniCssExtractPlugin(
            {
                ファイル名: 'css/[name].css'
            }
        ）
    ]、
};

3. パッケージ化とテスト

npm 実行 webpack

4.2 html-withimg-loaderを使用してHTML内の画像を処理する

1. html-withimg-loaderをインストールする

npm インストール --save-dev html-withimg-loader

2. webpack.config.jsファイルを構成する
config.js は、

定数パス = require('path');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

モジュール.エクスポート = {
    モード: '開発'、
    エントリー: {
        インデックス: './src/index.js',
        検索: './src/search.js',
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: '[name].js',
    },
    モジュール: {
        ルール:
            {
                // 正規表現マッチングテスト: /\.js$/,
                // 除外フォルダー exclude: /node_modules/,
                // 指定されたローダーを使用する
                ローダー: 'babel-loader'
            },
            {
                // 正規表現マッチングテスト: /\.css$/,
                // css-loader を使用して js 内の css を識別し、MiniCssExtractPlugin.loader を使用して css ファイルをインポートします // 配列の順序に注意し、右から左に使用します: [
                    {
                        ローダー: MiniCssExtractPlugin.loader、
                        オプション:
                            パブリックパス: '../'
                        }
                    },
                    'cssローダー'
                ]
            },
            {
                // 正規表現マッチングテスト: /\.(jpe?g|png|gif)$/,
                使用： {
                    ローダー: 'ファイルローダー',
                    オプション:
                        名前: 'img/[名前].[拡張子]',
                        esModule: 偽
                    }
                }
            },
            {
                // 正規表現マッチングテスト: /\.(html?)$/,
                ローダー: 'html-withimg-loader'
            }
        ]
    },
    プラグイン: [
        //複数エントリ new HtmlWebpackPlugin(
            {
                テンプレート: './index.html',
                ファイル名: 'index.html',
                チャンク: ['インデックス'],
                縮小:
                    // コメントを削除する removeComments: true,
                    // スペースを削除する collapseWhitespace: false,
                    // HTML タグ属性から二重引用符を削除します。removeAttributeQuotes: true
                }
            }
        ）、
        新しいHtmlWebpackプラグイン(
            {
                テンプレート: './search.html',
                ファイル名: 'search.html',
                チャンク: ['検索']
            }
        ）、
        新しい MiniCssExtractPlugin(
            {
                ファイル名: 'css/[name].css'
            }
        ）
    ]、
};

3. パッケージ化とテスト

npm 実行 webpack

4.3 ファイルローダーを使用して js で画像を処理する

インデックス

'./images/1.jpg' から img をインポートします。

1. ファイルローダーをインストールする

npm インストール --save-dev ファイルローダー

2. webpack.config.jsファイルを構成する
config.js は、

定数パス = require('path');

モジュール.エクスポート = {
    モード: '開発'、
    エントリー: {
        インデックス: './src/index.js',
        検索: './src/search.js',
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: '[name].js',
    },
    モジュール: {
        ルール:
            ......
            {
                // 正規表現マッチングテスト: /\.(jpe?g|png|gif)$/,
                使用： {
                    ローダー: 'ファイルローダー',
                    オプション:
                        名前: 'img/[名前].[拡張子]',
                        esModule: 偽
                    }
                }
            }
        ]
    },
};

3. パッケージ化とテスト

npm 実行 webpack

4.4 url-loaderを使用して画像を処理する

インデックス

'./images/1.jpg' から img をインポートします。

1. url-loaderとfile-loaderをインストールする

npm インストール --save-dev url-loader ファイルローダー

2. webpack.config.jsファイルを構成する
config.js は、

定数パス = require('path');

モジュール.エクスポート = {
    モード: '開発'、
    エントリー: {
        インデックス: './src/index.js',
        検索: './src/search.js',
    },
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        ファイル名: '[name].js',
    },
    モジュール: {
        ルール:
            ......
            {
                // 正規表現マッチングテスト: /\.(jpe?g|png|gif)$/,
                使用： {
                    ローダー: 'url-loader',
                    オプション:
                        名前: 'img/[名前].[拡張子]',
                        esModule: 偽、
                        制限: 10000 // 10k 未満の画像は base64 形式に変換されます}
                }
            }
        ]
    },
};

3. パッケージ化とテスト

npm 実行 webpack

JavaScript での Webpack の使用に関するこの記事はこれで終わりです。JavaScript Webpack の使用に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: